如何从jQueryAjax向flask视图发送POST请求？_Jquery_Python_Json_Ajax_Flask

如何从jQueryAjax向flask视图发送POST请求？

jquery python json ajax flask

如何从jQueryAjax向flask视图发送POST请求？,jquery,python,json,ajax,flask,Jquery,Python,Json,Ajax,Flask,希望你有一个美好的一天：D 因此，让我从解释我要做的事情开始：我有一个html页面（index.html）和一个视图（/index）。index.html页面包含一个表单，提交时将使用jquery ajax向/index视图发送json对象下面是非常简单明了的index.html的代码： <body> <form action="/" method='post'> <button id='submit'>submit</button> &

希望你有一个美好的一天：D 因此，让我从解释我要做的事情开始：我有一个html页面（index.html）和一个视图（/index）。index.html页面包含一个表单，提交时将使用jquery ajax向/index视图发送json对象下面是非常简单明了的index.html的代码：

<body>
<form action="/" method='post'>
    <button id='submit'>submit</button>
</form>

<script src="../static/jquery.min.js"></script>
<script>
    function saveMenu() {
        localStorage.setItem("shoppingMenu", JSON.stringify(
            [{"name":"*Kabab Combo Plate","price":10.99,"count":4},
            {"name":"Mixed Grill(Lamb, Chicken, Kefta)","price":14.99,"count":4}]
            ));
    };

    saveMenu();

    function loadMenu() {
        menu = JSON.parse(localStorage.getItem("shoppingMenu"));
        return menu;
    };
</script>
<script>
    $(document).ready(function() {
        var menu = JSON.stringify(loadMenu());
        $('#submit').click(function(){
            $.ajax({
                data: menu,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: '{{ url_for("index") }}',
                success: function(m){
                        console.log(m);
                },
                error: function(m){
                    console.log(m);
                }
            });
        });
    });
</script>
</body>

下面是执行前一个代码时发生的情况：

* Debugger is active!
* Debugger PIN: 143-889-961
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [24/Oct/2017 21:12:20] "GET / HTTP/1.1" 200 -
header:  application/json; charset=UTF-8
data type:  <class 'list'>
data =  [{'name': '*Kabab Combo Plate', 'count': 4, 'price': 10.99}, {'name': 'Mixed Grill(Lamb, Chicken, Kefta)', 'count': 4, 'price': 14.99}]
{'name': '*Kabab Combo Plate', 'count': 4, 'price': 10.99}
{'name': 'Mixed Grill(Lamb, Chicken, Kefta)', 'count': 4, 'price': 14.99}
127.0.0.1 - - [24/Oct/2017 21:12:24] "POST / HTTP/1.1" 200 -
header:  application/x-www-form-urlencoded
data type:  <class 'NoneType'>
data =  None
127.0.0.1 - - [24/Oct/2017 21:12:24] "POST / HTTP/1.1" 500 -
Traceback (most recent call last):
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1997, in __call__
    return self.wsgi_app(environ, start_response)
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1985, in wsgi_app
    response = self.handle_exception(e)
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1540, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\_compat.py", line 33, in reraise
    raise value
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\Orbit\flaskname\lib\site-packages\flask\app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "C:\Users\Orbit\flaskname\app\hello.py", line 25, in index
    for i in data:
TypeError: 'NoneType' object is not iterable
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=style.css HTTP/1.1" 200 -
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=jquery.js HTTP/1.1" 200 -
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=debugger.js HTTP/1.1" 200 -
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=ubuntu.ttf HTTP/1.1" 200 -
127.0.0.1 - - [24/Oct/2017 21:12:24] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -

*调试器处于活动状态！
*调试器PIN:143-889-961
*继续http://127.0.0.1:5000/ （按CTRL+C退出）
127.0.0.1---[2017年10月24日21:12:20]“GET/HTTP/1.1”200-
标题：application/json；字符集=UTF-8
数据类型：
数据=[{'name'：'*Kabab组合盘，'count'：4，'price'：10.99}，{'name'：'Mixed Grill（羊肉、鸡肉、羊肉）'，'count'：4，'price'：14.99}]
{'name'：'*Kabab组合盘，'count'：4，'price'：10.99}
{'name'：'Mixed Grill（羊肉、鸡肉、羊肉）'count'：4，'price'：14.99}
127.0.0.1---[2017年10月24日21:12:24]“POST/HTTP/1.1”200-
标题：application/x-www-form-urlencoded
数据类型：
数据=无
127.0.0.1---[2017年10月24日21:12:24]“POST/HTTP/1.1”500-
回溯（最近一次呼叫最后一次）：
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1997行，在调用中__
返回self.wsgi_应用程序（环境，启动响应）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1985行，在wsgi_应用程序中
response=self.handle\u异常（e）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1540行，在句柄\u异常中
重放（exc_类型、exc_值、tb）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\\u compat.py”，第33行，重新登录
增值
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1982行，在wsgi_应用程序中
response=self.full\u dispatch\u request（）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1614行，完整发送请求
rv=自身处理用户异常（e）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1517行，在handle\u user\u异常中
重放（exc_类型、exc_值、tb）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\\u compat.py”，第33行，重新登录
增值
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1612行，完整发送请求
rv=自我分派请求（）
文件“C:\Users\Orbit\flaskname\lib\site packages\flask\app.py”，第1598行，在调度请求中
返回self.view_函数[rule.endpoint]（**req.view_参数）
文件“C:\Users\Orbit\flaskname\app\hello.py”，第25行，在索引中
对于数据中的i：
TypeError:“非类型”对象不可编辑
127.0.0.1---[2017年10月24日21:12:24]“获取/？\uuuuu调试器\uuuuuuuu=yes&cmd=resource&f=style.css HTTP/1.1”200-
127.0.0.1---[2017年10月24日21:12:24]“获取/？\uuuuu调试器\uuuuuuuu=yes&cmd=resource&f=jquery.js HTTP/1.1”200-
127.0.0.1---[2017年10月24日21:12:24]“获取/？\uuuuu调试器\uuuuuuuu=yes&cmd=resource&f=debugger.js HTTP/1.1”200-
127.0.0.1---[2017年10月24日21:12:24]“获取/？\uuuuu调试器\uuuuuuuu=yes&cmd=resource&f=ubuntu.ttf HTTP/1.1”200-
127.0.0.1---[2017年10月24日21:12:24]“获取/？\uuuuu调试器\uuuuuuuu=yes&cmd=resource&f=console.png HTTP/1.1”200-

通过查看打印语句输出，在错误出现之前，请注意request.json工作正常，正在返回我们期望的数据，但随后出现了一个

127.0.0.1---[24/Oct/2017 21:12:24]“POST/HTTP/1.1”200-

显示，然后看起来view函数正在重新运行，然后print语句正在输出none作为数据变量的值。。。有人知道为什么会发生这种情况吗？如何修复它

您可以通过删除html模板中的表单来修复当前模式：

<button id='submit'>submit</button>

提交

如果需要，让按钮单独使用或将其放在另一个部分中，但是表单似乎提出了一个并行请求。我将尝试链接一些文档以更好地解释它。

问题是，默认情况下，表单中的提交事件（在本例中，当您单击提交按钮时发生）将重定向到表单的

操作，因此，您实际上正在执行两个请求（ajax和默认）
要防止出现这种情况，请在单击处理程序中激发event.preventDefault
（并将event
添加到参数中）
您还需要从flask视图返回json响应，如下所示：
from flask import jsonify

# ...

  return jsonify('success')

非常感谢：））。这防止了回溯错误。但是ajax正在记录错误函数error:function（m）{console.log（m）；}
以下是保存记录的错误值的参数：readyState:4
，responseText:“success”
，状态：200
，状态：“OK”
到目前为止，您已经帮了我很多忙，但是如果您知道ajax错误出现的原因或者我是否应该关心它，请告诉我。再次感谢^^这个问题是因为在请求中您请求json，但返回了一个字符串，所以jQuery抛出了一个解析错误。要修复它，您应该从flask视图返回json。更新了答案以显示此信息。无论何时我提交表单，“Success”现在都会显示为警报。但正如您所知，我使用“success”作为返回值，因此代码简单易懂。如何返回渲染模板或重定向（url for））？代码中是否有更改？您必须在某处使用警报，才能成功显示为警报。在任何情况下，如果您使用的是ajax，返回render_模板或重定向都没有意义，因为您应该期望json返回；然后应该从js端触发路径更改或重定向。是ajax内部的success:function（m）{alert（m）}返回了我从flask视图返回的内容！。请告诉我如何从js更改路径，因为这是我对Hank you@PRMoureu感兴趣的一种解决问题的方法，但我需要将表单用于其他目的，所以我保留它，我们也保留它
.click(function(event) {
  // ...
  event.preventDefault()
}

from flask import jsonify

# ...

  return jsonify('success')