点击按钮AJAX调用后Flask render_template无法渲染页面问题

核心问题 #

后端submit接口中player_averages能正常打印，但results.html模板始终无法渲染，尝试过直接在submit中渲染模板、使用render_template_string均无效。

问题根源 #

1. AJAX异步请求不处理重定向：前端用AJAX发送POST请求时，后端返回的redirect响应会被AJAX接收，但浏览器不会自动执行页面跳转，导致结果页无法显示。
2. 字典无法直接通过URL参数传递：redirect(url_for('results', player_averages=player_averages))会把字典转成字符串传递，后端request.args.get拿到的是字符串而非字典，模板渲染时因数据格式错误导致异常。

解决方案 #

方案一：AJAX成功后手动跳转+JSON传递数据 #

后端submit接口修改

@app.route('/submit', methods=['POST'])
def submit():
    data = request.get_json()

    conn = sqlite3.connect('mydatabase.db')
    c = conn.cursor()

    for record in data:
        dropzone_id = record['dropzone_id']
        data_image = record['data_image']
        data_player_name = record['data_player_name']
        c.execute("INSERT INTO player_real (dropzone_id, data_image, data_player_name) VALUES (?, ?, ?)", 
                  (dropzone_id, data_image, data_player_name))

    player_averages = {}
    for record in data:
        player_id = record['data_image']
        c.execute("SELECT AVG(CAST(SUBSTR(dropzone_id, 10) AS INTEGER)) FROM player_real WHERE data_image = ?",
                  (player_id,))
        avg_ranking = c.fetchone()[0]
        player_averages[player_id] = avg_ranking

    conn.commit()
    conn.close()

    # 返回包含跳转URL的JSON
    import json
    return json.dumps({
        'redirect_url': url_for('results', player_averages=json.dumps(player_averages))
    })

前端AJAX修改

$(document).ready(function() {
  $('.submit-button').click(function(e) {
    e.preventDefault();

    var data = [];
    $('.dropzone').each(function() {
      var dropzone_id = $(this).attr('id');
      $(this).find('.imagebox').each(function() {
        var data_image = $(this).attr('data-image');
        var data_player_name = $(this).attr('data-player-name');
        data.push({
          'dropzone_id': dropzone_id,
          'data_image': data_image,
          'data_player_name': data_player_name
        });
      });
    });

    $.ajax({
      type: 'POST',
      url: '/submit',
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function(response) {
        var res = JSON.parse(response);
        // 手动跳转结果页
        window.location.href = res.redirect_url;
      },
      error: function(error) {
        console.log(error);
     }
    });
  });
});

后端results接口修改

@app.route('/results')
def results():
    import json
    player_averages_str = request.args.get('player_averages')
    player_averages = json.loads(player_averages_str) if player_averages_str else {}
    print(player_averages)
    return render_template('results.html', player_averages=player_averages)

方案二：用Session传递数据（更优雅） #

后端初始化设置

首先给Flask应用添加SECRET_KEY（用于Session加密）：

app = Flask(__name__)
app.secret_key = 'your_secure_secret_key_here'  # 替换为随机安全字符串

后端submit接口修改

from flask import session

@app.route('/submit', methods=['POST'])
def submit():
    # ... 原有数据库操作、计算player_averages的代码 ...

    # 将数据存入Session
    session['player_averages'] = player_averages
    # 重定向到结果页
    return redirect(url_for('results'))

后端results接口修改

@app.route('/results')
def results():
    # 从Session取出数据，取出后清除避免重复使用
    player_averages = session.get('player_averages', {})
    session.pop('player_averages', None)
    print(player_averages)
    return render_template('results.html', player_averages=player_averages)

前端AJAX修改

$(document).ready(function() {
  $('.submit-button').click(function(e) {
    e.preventDefault();

    var data = [];
    $('.dropzone').each(function() {
      var dropzone_id = $(this).attr('id');
      $(this).find('.imagebox').each(function() {
        var data_image = $(this).attr('data-image');
        var data_player_name = $(this).attr('data-player-name');
        data.push({
          'dropzone_id': dropzone_id,
          'data_image': data_image,
          'data_player_name': data_player_name
        });
      });
    });

    $.ajax({
      type: 'POST',
      url: '/submit',
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function(response) {
        // 直接跳转结果页
        window.location.href = '/results';
      },
      error: function(error) {
        console.log(error);
     }
    });
  });
});

模板渲染验证 #

确保results.html中正确使用Jinja2语法遍历数据：

{% for player_id, avg_ranking in player_averages.items() %}
  <div class="player-result">
    <img src="{{ url_for('static', filename='player_faces/' + player_id) }}" alt="Player Face">
    <p>平均排名: {{ avg_ranking }}</p>
  </div>
{% endfor %}

内容的提问来源于stack exchange，提问作者nitsua