Javascript 通过POST将JSON从Flask返回到AJAX

我正在使用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>

我希望返回的JSON对象被打印到表单下方的屏幕上，但是返回的数据直接打印到浏览器窗口，而浏览器窗口不维护“index.html”的结构（它有导航栏和表单）。我得到的答复如下：

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

---

同样，这是正确的格式，但是数据没有像我希望的那样打印到数据。JavaScript和jQuery/AJAX是全新的，所以我很确定我遗漏了一些非常琐碎的东西。

解决方案：

结果发现我有很多问题。首先，在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>

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

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

致：

---

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

解决方案：

事实证明，我遇到了很多问题。首先，在我没有包含在OP中的一行中，我的jQuery负载不好。不知道为什么，但我打开控制台，看到了JS错误（使用Chrome，右键单击>>检查>>“控制台”选项卡，在页面右上角）。我改变了我的做法（

src=“{url\u 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>

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

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

致：

---

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

您没有阻止表单提交的默认操作。用户提交表单，浏览器发送请求并加载该页面。请参阅。@PatrickEvans我尝试添加“event.preventDefault（）；“在“}”下“.ajax关闭，但任何更改都不起作用。请确保正确包含脚本（您能否在浏览器中打开由

{url_for（'static'），filename='/js/script.js'}

生成的链接？）。您没有阻止表单提交的默认操作。用户提交表单，浏览器发送请求并加载该页面。请参阅。@PatrickEvans我尝试添加“event.preventDefault（）；“在“}”下“.ajax关闭，但任何更改都不起作用。请确保正确包含脚本（能否在浏览器中打开由

{url\u for（'static'），filename='/js/script.js'}

生成的链接？）。

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