Question

我正在尝试将表单数据发布到我的服务器。我写了以下ajax调用，但我一直收到400 Bad错误。有什么帮助吗？

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : $('#form').serialize(),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

以下是我的HTML表单：

<form id="form">
    <p>Input the URL of 2 images!</p>
    <input id="img1" name="img1" type="text" placeholder="Image 1 URL">
    <input id="img2" name="img2" type="text" placeholder="Image 2 URL">
<input id="submit" type="submit" value="Compare!">
</form>

Answer 1

由于您尝试将JSON发送到服务器，因此您可以使用数据创建对象，然后在将其发送到服务器之前对其进行字符串化。

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        var img1 = $("#img1").val();
        var img2 = $("#img2").val();
        var myData = {img1: img1, img2: img2};
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify(myData),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

Answer 2

基于：Convert form data to JavaScript object with jQuery

$(document).ready(function(){

    $("#submit").on('click', function(){

        // an object to store the form data
        var data = {};

        // for each array element of the serializeArray
        // runs the function to create a new attribute on data
        // with the correct value
        $("#form").serializeArray().forEach( function(element){
            data[element.name] = element.value;
        });

        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify(data),   // serializes the data object to JSON
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

Answer 3

使用以下代码更改您的JS代码：

$(document).ready(function(){
    // click on button submit
    $("#submit").on('click', function(){
        // send ajax
        $.ajax({
            url: "/compare",
            type : "POST",
            contentType : 'application/json; charset=utf-8',
            data : JSON.stringify( $(form).serializeArray() ),
            success : function(result) {
                console.log(result);
            },
            error: function(xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        })
    });
});

我使用以下代码将表单数据转换为json后发送： JSON.stringify（$（form）.serializeArray（））

Answer 4

更改内容类型：

$(document).ready(function(){
// click on button submit
$("#submit").on('click', function(){
    // send ajax
    $.ajax({
        url: "/compare",
        type : "POST",
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        data : $('#form').serialize(),
        success : function(result) {
            console.log(result);
        },
        error: function(xhr, resp, text) {
            console.log(xhr, resp, text);
        }
    })
});

}）;

Ajax在提交表单时收到400 Bad Request

4 个答案: