将下拉列表从 Python 重新填充到 jQuery 网页

Posted 2023-05-08

【中文标题】将下拉列表从 Python 重新填充到 jQuery 网页

【英文标题】：Re-populating Dropdown from Python to jQuery webpage

【发布时间】：2021-10-27 20:00:04

【问题描述】：

我正在使用 Python/Flask 创建电影推荐程序，但遇到了问题。

该程序的功能是让用户从大型下拉列表中选择电影并使用协同过滤接收推荐。所有逻辑都按预期工作，但我将在下面描述问题。

总而言之，Python 从一个转换为 json 的 pandas 数据帧开始。该 json 通过烧瓶发送到填充 html 下拉列表的 javascript/jquery 函数。

Python：

@app.route('/', methods=['GET'])    
def index():
    final_data_pass = df.to_json(orient='records')
    return render_template("index.html", final_data_pass=final_data_pass)

HTML：

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

Javascript/jQuery

<script>
    $(function() 
        var data =  final_data_pass|safe
        $.each(data, function(i, option) 
        $('#sel').append($('<option>').attr("value", option.newId).text(option.title));
        );
    )
</script>

因此，当页面加载时，下拉菜单成功填充，并且可以使用提交按钮选择并提交电影以将推荐返回到屏幕。问题是按下提交按钮后，下拉菜单没有重新填充。

我知道脚本只会运行一次并使网页保持静态，但我不知道编写解决方案以重新填充下拉列表。

让我知道是否还需要其他任何东西来理解问题。

谢谢！

更新：我正在尝试按照 Bravo 的建议使用 ajax，但是当我将脚本替换为：

$(document).ready(function () 
       $.ajax(
           type: "GET",
           url: "/",
           data: final_data_pass|safe,
           success: function (data) 
               var s = '<option value="-1">Select a movie</option>';
               for (var i = 0; i < data.length; i++) 
                   s += '<option value="' + data[i].newId + '">' + data[i].title + '</option>';
               
               $("#sel").html(s);
           
       );
   );

页面变慢和延迟，以及显示“未定义”而不是电影名称的选项。

【问题讨论】：

你看过 ajax 吗？

我已经调查过了，但不确定如何使用它来解决我的问题

【参考方案1】：

在我的情况下有效的解决方案是将 Flask 变量和定义添加到 POST 方法（除了在 GET 方法函数中使用）。

@app.route('/', methods=['POST'])    
def submitted():
    ...
    ...
    ...
    final_data_pass = df.to_json(orient='records')
    return render_template("index.html", final_data_pass=final_data_pass)