通過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對象及其內容打印到頁面上的一段中。