Question

我正在使用AJAX将用户输入表单发送到Flask，在那里处理它，在查询中使用，结果作为JSON对象发回。在表单提交时调用AJAX，我将返回正确的查询结果。但是，当返回结果时，JSON对象将打印到浏览器窗口，而不是维护原始页面的模板格式。

views.py

> (zip (list 'a 'b 'c) (list 1 2 3) (list "do" "re" "mi"))
- : (Listof (List (U 'a 'b 'c) Positive-Byte String))
'((a 1 "do") (b 2 "re") (c 3 "mi"))

的index.html：

@app.route('/table_data', methods=['POST'])
def table_data():
    request_info = request.form
    #Incoming data is processed here and converted into following format:
    data = [{'name': 'bill', 'state': 'CA', 'id': 012345},
            {'name': 'cindy', 'state': 'NY', 'id': 098765}, ...]
    return jsonify(data)

的script.js：

<script type="text/javascript" src="{{ url_for('static'), filename='/js/script.js'}}"></script>
<form action="{{ url_for('table_data') }}" class="form-inline" method="post"
        role="form" enctype="application/json">
    <input type="text" class="form-control" id="name" name="name">
    <input type="text" class="form-control" id="state" name="state">
    <input type="text" class="form-control" id="id" name="id">
    <button type='submit' class="btn btn-default">Submit</button>
</form>
<p id="response"></p>

我希望将返回的JSON对象打印到表单下面的屏幕上，但是返回的数据会直接打印到浏览器窗口，而不会维护'index.html'（带有navbars）的结构和表格）。我退回了这个：

$(document).ready(function() {
    $('form').on('submit', function(event) {
        $.ajax({
            url: '/table_data',
            data: $('form').serializeArray(),
            type: 'POST',
            success: function(response) {
                $('#response').text(response);
            }
        })
    });
});

同样，这是正确的格式，但数据不像我想要的那样打印到数据

。全新的JavaScript和jQuery / AJAX，所以我很确定我错过了一些非常简单的东西。

Answer 1

<强>解：

原来我发生了很多问题。首先，在我没有包含在OP中的一行中，我的jQuery负载很糟糕。不知道为什么，但我打开我的控制台并看到了JS错误（使用Chrome，右键单击＆gt;＆gt;检查＆gt;＆gt;＆＃34;控制台＆＃34;标签位于页面右上角）。我从我的内容（src="{{ url_for('static', filename="/js/jquery-3.2.1.min.js) }}"）改变了这一点，而只是将其加载为谷歌托管库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我的回复随后打印在段落id =＆＃34; repsonse＆＃34;中，但是作为：

[object, Object], [object, Object], ..., [object, Object]

要实际打印JSON对象的内容，我更改了行

$('#response').text(response);

为：

$('#response').text(JSON.stringify(response));

将我的JSON对象及其内容打印到页面上的段落。

通过POST将Flask中的JSON返回给AJAX

1 个答案: