Jquery / Ajax表单POST将空提交给我的API

时间:2017-12-27 20:31:22

标签: javascript jquery python ajax flask

我在使用Jquery& amp时遇到了一些问题。 Ajax将表单提交给我的API,该表由Flask-RestPlus&蟒蛇。当我从CURL运行我的API,或者使用swagger时,它按预期工作,但是当我尝试使用Jquery / Ajax将表单提交到同一个端点时,我没有从表单提交中获取任何数据。

这是HTML / Jquery

<form name="login" id="login">
<input type="text" name="email" id="email">
<input type="password" name="password" id="password">
<button type="submit">Submit</button>
</form>

</body>
<script>
$("#login").submit(function(e) {

    var url = "/auth/login_user"; //

    $.ajax({
           type: "POST",
           url: url,
           data: $("#login").serializeArray(), // I've tried serializeArray() & serialize()
           success: function(data)
           {
               alert(data);
           }
         });

    e.preventDefault(); 
});
</script>

当我检查浏览器中的代码时,看起来它正在发送表单数据,但当我从我的python函数在控制台中打印它时,我可以告诉我得到一个None类型。

非常感谢任何帮助。我知道我可以使用Jquery.val()来获取每个表单元素的值,但它似乎不是解决此问题的正确方法。

1 个答案:

答案 0 :(得分:0)

对于有这个问题的任何人..这似乎是Flask-RestPlus / Flask在ajax POST中采用的方式。不确定到底发生了什么,但我确实通过使用这个Jquery lib找到了解决方法; https://github.com/marioizquierdo/jquery.serializeJSON

和我的代码一样..

    <script>
$("#login").submit(function(e) {

    var url = "/auth/login_user";
    var form_data = $('#login').serializeJSON();

    console.log(form_data)

    $.ajax({
           type: "POST",
           url: url,
           contentType: 'application/JSON',
           data: JSON.stringify(form_data),
           success: function(data)
           {
               alert(data); // 
           }
         });

    e.preventDefault(); 
});
</script>