Question

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

请耐心等待我学习JS / jQuery。

Flask代码：

@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

Answer 1

1）url应该用这样的单引号括起来

url : '/submitworkorder',

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

3）添加dataType

dataType: "json",

Answer 2

尝试添加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();
}
        }
    });

Answer 3

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

      });

Answer 4

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

AJAX脚本无法POST表单数据

4 个答案: