Flask电影推荐项目jQuery下拉框提交后无法重填及AJAX异常求助

你修改后的AJAX实现存在三个核心错误，对应你遇到的所有异常：

• AJAX请求返回内容错误：你向/路由发送GET请求，该路由返回的是完整HTML页面而非纯JSON电影数据，你把HTML文本当做数组遍历自然无法获取newId和title字段，所以选项显示为Undefined
• 请求冗余导致卡顿：渲染模板时你已经把电影数据传递给了前端，完全不需要再发送额外AJAX请求，多余的大体积请求直接导致页面加载卡顿
• 原提交后无填充的本质：表单同步提交后页面会整体刷新，你只要保证刷新后填充逻辑正常执行即可，不需要重构为AJAX方案

第一步：调整后端路由 #

给路由增加POST方法支持，同时把用户选中的电影ID回传给前端，方便提交后保留选中状态：

from flask import request

@app.route('/', methods=['GET', 'POST'])    
def index():
    final_data_pass = df.to_json(orient='records')
    selected_id = request.form.get('dropdown', -1)
    # 这里保留你原来的协同过滤推荐逻辑即可
    recommend_res = []
    if request.method == 'POST':
        selected_movie_id = int(selected_id)
        # 你的推荐逻辑写在这里，生成recommend_res
    return render_template("index.html", 
                          final_data_pass=final_data_pass,
                          selected_id=selected_id,
                          recommend_res=recommend_res)

第二步：还原并优化前端填充逻辑 #

删除冗余的AJAX代码，在原有填充逻辑基础上增加选中状态判断即可：

<form method="POST">
    <label>What is your favorite movie?</label>
    <select name="dropdown" id="sel"></select>
    <input type="submit" />
</form>

<script>
$(function() {
    // 直接用模板传递的电影数据，不需要额外请求
    const movieData = {{final_data_pass|safe}};
    const selectedId = {{selected_id|safe}};
    const $select = $('#sel').empty();
    // 先加默认提示选项
    $select.append($('<option>').attr("value", "-1").text("Select a movie"));
    // 遍历填充所有选项
    $.each(movieData, function(i, item) {
        const $option = $('<option>').attr("value", item.newId).text(item.title);
        // 提交后自动选中用户之前选的电影
        if (item.newId == selectedId) {
            $option.prop('selected', true);
        }
        $select.append($option);
    });
})
</script>

如果不想提交后页面刷新，可以增加异步提交逻辑，此时下拉框不会被重置，不需要重新填充：

$('form').submit(function(e) {
    e.preventDefault(); // 阻止默认同步提交
    $.post('/', $(this).serialize(), function(res) {
        // 把返回的推荐结果渲染到页面对应位置即可
    })
})

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