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

问题描述

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

一切都很好，除了我提交 order_id 时表格只闪烁一秒钟。每次我提交时它都有效，但表格不会留下来。

我的 Python（烧瓶）代码：

@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，以防它是 jQuery 的东西，但看起来它不是
尝试四处走动$('#orders_table').append(table_html);，添加.show（），将其插入ajaxComplete（）而不是，..都无济于事

真的很想在这里得到一些帮助！

标签： jqueryhtmlajax

好吧，在重构、重写并对此失去理智之后，这个问题并没有我想象的那么复杂。原来 htmlform提交默认会重新加载页面。

我所要做的就是return false在处理 order_id 并生成 html.. Head -> Table 的 jQuery 函数的末尾添加！感谢您确认在烧瓶 ajax 请求后转到不要重新加载网页

由于这种相当愚蠢的故障排除疯狂，我学到了很多关于（几乎不相关的）回调和新的async/await可能性。有兴趣的可以看下这篇文章： jQuery：ajax调用成功后返回数据

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

问题描述

解决方案

推荐阅读