通过 POST 从 Flask 返回 JSON 到 AJAX答案

【问题标题】：Return JSON from Flask to AJAX via POST通过 POST 从 Flask 返回 JSON 到 AJAX
【发布时间】：2017-12-05 11:07:37
【问题描述】：

我正在使用 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，所以我很确定我错过了一些非常微不足道的东西。

【问题讨论】：

您没有阻止表单提交的默认操作。用户提交表单，浏览器发送请求并加载该页面。
见Ajax Form submit with preventDefault。
@PatrickEvans 我尝试添加“event.preventDefault();”在“})”.ajax 下关闭，但没有任何改变
它应该可以工作。确保正确包含脚本（您可以在浏览器中打开由{{ url_for('static'), filename='/js/script.js'}} 生成的链接吗？）。

标签： javascript jquery python ajax flask

【解决方案1】：

解决方案：

原来我遇到了很多问题。首先，在我没有包含在 OP 中的一行中，我的 jQuery 负载很糟糕。不知道为什么，但我打开了我的控制台并看到了 JS 错误（使用 Chrome，右键单击 >> 检查 >> 页面右上角的“控制台”选项卡）。我将其从我所拥有的 (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="repsonse" 段落中，但为：

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

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

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

到：

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

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

【讨论】：