通过POST将Flask的JSON返回AJAX

Question

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

views.py

@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)

index.html：

<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>

script.js：

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

我希望将返回的JSON对象打印到表单下方的屏幕上，但是，返回的数据将直接打印到浏览器窗口中，该窗口不维护'index.html'结构（具有导航栏和表单） ）。 我得到这个：

[
    {
        'name': 'bill',
        'state': 'CA',
        'id': 012345
    },
    {
        'name': 'cindy',
        'state': 'NY',
        'id': 098765
    },
    ...
]

同样，这是正确的格式，但是数据没有打印到数据中

就像我想要的那样。 JavaScript和jQuery / AJAX的新手，所以我很确定自己缺少一些琐碎的东西。

Answer 1

解决方案 ：

事实证明，我遇到了很多问题。 首先，在我没有包含在OP中的一行中，我的jQuery负载很糟糕。 不知道为什么，但是我打开控制台并看到JS错误（使用Chrome，右键单击>>检查>>页面右上角的“控制台”选项卡）。 我从已有的内容中更改了此内容（ src="{{ url_for('static', filename="/js/jquery-3.2.1.min.js) }}" ），而是将其作为google托管库加载：

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

然后，我的答复被打印在id =“ repsonse”段落中，但内容如下：

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

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

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

至：

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

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