Ajax提交表單時收到400錯誤請求

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

基於： 使用jQuery將表單數據轉換為JavaScript對象

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

}）;