AJAX 脚本无法 POST 表单数据答案

【问题标题】：AJAX Script Failing to POST form dataAJAX 脚本无法 POST 表单数据
【发布时间】：2017-06-18 16:55:11
【问题描述】：

我有一个使用 Postman 成功测试的 Flask API，它接收 JSON 数据并将其提交到数据库。但是，我无法使用浏览器中的 HTML / JS 这样做。

请耐心等待，因为我只是在学习 JS / jQuery。

烧瓶代码：

@app.route('/submitworkorder', methods=['POST'])
def submitworkorder():
    form = SubmitWorkorderForm.from_json(request.json)
    if form.validate_on_submit():
        customer = form.customer.data
        return jsonify({'customer' : customer })
    else:
        for field, errors in form.errors.items():
                for error in errors:
                    error_data = (u"Error in the %s field - %s" % (getattr(form, field).label.text, error), 'error')
    return jsonify({'error' : error_data})

我的 JS 代码：

$(document).ready(function() {

$('form').on('submit', function(event) {
    $.ajax({
        type : "POST",
        url : '/submitworkorder',
        data : $('form').serialize()
    })

    .done(function(data) {

        if (data.error) {
            $('#errorAlert').text(data.error).show();
            $('#successAlert').hide();
        }
        else {
                $('#successAlert').text(data.customer + 'successfully created.').show();
                $('#errorAlert').hide();
        }
    });

    event.preventDefault();

}); 

});

我的 HTML / 表单：

</script>
</head>
<body>
<div class="container">
    <br><br><br><br>
    <form class="form-inline">
         {{ form.customer }}
         {{ form.hidden_tag() }}

      <input type="submit" value="go"/>
    </form>
    <br>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
    <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>

</div>
</div>

控制台 - 您在此处看到的错误是我的 WTForms 验证错误返回的数据。 Object {error: Array(2)} error:Array(2)0: "Error in the customer field - This field is required." 1:"error"length:2

【问题讨论】：

url 应该用单引号括起来，例如 url：'/submitworkorder'，并且在同一行末尾缺少逗号
检查你的控制台。它显示了什么错误并使用成功而不是完成
请记住始终使用控制台“F12”进行调试。
请在此处发布您的控制台输出
@AkhilMenon - 控制台在开发终端和 Chrome 开发者工具上都是空的，除了一些 favicon 404。我没有一套。即使在尝试发布数据之后。

标签： javascript jquery ajax flask

【解决方案1】：

尝试添加 dataType: "json"

 $.ajax({
        type: "POST",
        dataType: "json",
        url : "/submitworkorder",
        data : $('form').serialize(),
        success: function (data) {
                   if (data.error) {
    $('#errorAlert').text(data.error).show();
    $('#successAlert').hide();
}
else {
        $('#successAlert').text(data.customer + 'successfully created.').show();
        $('#errorAlert').hide();
}
        }
    });

【讨论】：

不幸的是没有工作。使用控制台输出更新了 OP。

【解决方案2】：

Try:

        $.ajax({
            type: "POST",
            dataType: "json",
            url : "/submitworkorder",
            data : $('form').serialize(),
            success: function (data) {
               alert("Got success response")
               console.log(data) 
               $('#successAlert').text(data.customer + 'successfully created.').show();
               $('#errorAlert').hide();
            },
            error: function(data){
                alert("Got error response")
                console.log(data)
                $('#errorAlert').text(data.error).show();
                $('#successAlert').hide();
            }

      });

【讨论】：

不幸的是没有工作。使用控制台输出更新了 OP。
正如您在控制台输出中看到的错误消息，很明显ajax 没有问题。在传递给 ajax 之前，您应该检查表单的数据。
检查您传递给 ajax 的表单数据的输出，即 console.log("form Data:", $('form').serialize())
好的，我在 ajax 运行之前输入了该行，当我发布表单时控制台显示 form Data: customer=test%20name，看起来正确吗？

【解决方案3】：

1) url 应该像这样用单引号括起来

url : '/submitworkorder',

2) 在同一行末尾缺少逗号

3) 添加数据类型

dataType: "json",

【讨论】：

不幸的是没有工作。使用控制台输出更新了 OP。

【解决方案4】：

回答found here。基本上有一些旧的文档漂浮在周围，导致我使用 Flask-WTForms 的 JSON 扩展，但是现在 WTForms 支持它。

【讨论】：