Question

我正在使用Flask（Flask API link）创建一个非常简单的网站，该网站采用'order_id'，并在后台使用MySQL数据库（MYSQL - Python API link）最终返回该网站的关联项目表格中的order_id。

一切正常，除了在我提交order_id时表格仅闪烁一秒钟。每次我提交时都可以使用，但是桌子不会停留。

我的Python（Flask）代码：

@app.route('/fetch_order', methods=['POST'])
def fetch_order():
    order_id    = request.form.get('order_id')
    order       = connect_db.fetch_order_json(order_id)
    order       = json.dumps(order)
    return order

@app.route('/', methods=['GET', 'POST'])
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True, port=5440)

我的JS / jQuery：

$(document).ready( function() { 
    $("#order_id").submit( function() { 
        var order_id    = $('#order_id :text').val(); 
        var dataString  = 'order_id=' + encodeURIComponent(order_id);
        var body_rows   = [];
        var html        = '<tr>';

        $.ajax({
                type: "POST",
                data: dataString,
                url : "/fetch_order",

                success: function(json) {
                data = JSON.parse(json);

                if (data) {
                    $.each(data, function (index, data_list) {
                        data_dict = JSON.parse(data_list);
                        headers = Object.keys(data_dict);
                        body_rows += '<tr>';

                        $.each(data_dict, function (ignore, value) {
                            body_rows += '<td>' + value + '</td>';
                        });
                    body_rows += '</tr>'
                    });

                    $.each(headers, function (index, header) {
                        html += '<th>' + header + '</th>';
                    });

                    html += '</tr>';
                    html += body_rows;

                    // --> working but only for a second?!
                    $('#orders_table').append(html);
                }; },
                error: ...

我的html：

<div>
    <form id="order_id" accept-charset="utf-8">
        <input type="text" name="order_id" autofocus><br>
        <input type="button" value="Submit">
    </form>
</div>
<div>
    <table id="orders_table">
    </table>
</div>

以下问题的答案对我没有帮助（或者我只是不太了解它们）：

我的直觉告诉我，它与($.each())循环有关，但我似乎无法弄清楚。向正确方向的任何推动将不胜感激！

编辑：

试图通过将html中的标头硬编码为无效来降低复杂性
试图将jQuery重写为JS，但看起来好像不是
尝试移动$('#orders_table').append(table_html);，添加.show（），然后将其插入ajaxComplete（），..全部无效

真的很喜欢这里的帮助！

Answer 1

好的，在重构，重写并失去理智之后，这个问题比我想象的要复杂得多。事实证明，HTML form提交默认情况下会重新加载页面。

我要做的就是在处理order_id并生成html ..头->表的jQuery函数的末尾添加return false。感谢您确认前往 Don't reload webpage after flask ajax request

由于这种愚蠢的故障排除疯狂，我了解了很多（几乎不相关的）回调以及新的async/await可能性。对于那些感兴趣的人，这篇文章是黄金的： jQuery: Return data after ajax call success

使用Flask和jQuery动态创建的HTML表立即消失

1 个答案: