Javascript AJAX脚本无法发布表单数据_Javascript_Jquery_Ajax_Flask

Javascript AJAX脚本无法发布表单数据

javascript jquery ajax flask

Javascript AJAX脚本无法发布表单数据,javascript,jquery,ajax,flask,Javascript,Jquery,Ajax,Flask,我有一个FlaskAPI，我已经用Postman成功测试过，它接收JSON数据并将其提交到数据库。但是，我无法通过浏览器使用HTML/JS来实现这一点请容忍我，因为我只是在学习JS/jQuery 烧瓶代码： @app.route('/submitworkorder', methods=['POST']) def submitworkorder(): form = SubmitWorkorderForm.from_json(request.json) if form.valida

我有一个FlaskAPI，我已经用Postman成功测试过，它接收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>







{{form.customer}}
{{form.hidden_tag（）}}

控制台-您在这里看到的错误是从我的WTForms验证错误返回的数据。

对象{错误：数组（2）}
错误：数组（2）0:
“客户字段出错-此字段为必填字段。”
1：“错误”长度：2

1）url应该用如下单引号括起来

url : '/submitworkorder',

2）在同一行的末尾缺少逗号

3）添加数据类型

dataType: "json",

尝试添加数据类型：“json”

回答。基本上，有一些旧文档使我使用JSON扩展来扩展Flask WTForms，但是现在WTForms支持它。

url应该用单引号括起来，如url:“/submitworkorder”，控制台中的同一行末尾缺少逗号。它显示了哪些错误，并使用success而不是doneRemember始终使用控制台“F12”进行调试。请发布控制台输出here@AkhilMenon-除了一些favicon 404之外，dev终端和Chrome开发者工具上的控制台都是空的。我没有一套。即使在尝试发布数据之后。不幸的是，这并没有起作用。使用控制台输出更新了OP。不幸的是，它不起作用。使用控制台输出更新了OP。不幸的是，它不起作用。使用控制台输出更新了OP。正如您在控制台输出中看到的错误消息，很明显ajax中没有问题。在传递到ajax之前，您应该检查表单的数据。检查传递到ajax的表单数据的输出，即console.log（“表单数据：，$（'form'）.serialize（））好的，我在ajax运行之前输入了这一行，当我发布表单时，控制台显示了

form data:customer=test%20name

，这看起来正确吗？

 $.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();
}
        }
    });

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();
            }

      });