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

【问题标题】：Ajax getting 400 Bad Request when submitting FormAjax 在提交表单时收到 400 Bad Request
【发布时间】：2017-10-16 17:43:41
【问题描述】：

我正在尝试将表单数据发布到我的服务器。我已经编写了以下 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>

【问题讨论】：

您在/compare 的服务器是否提供HTTP POST 方法？
@davidbuzatto 是的。但它期待一个 JSON
您正在序列化一个表单，但您将它作为 JSON 发送。我们不知道服务器期望什么，但这样做会得到奇怪的数据。
@adeneo 我正在尝试将表单数据作为 json 发布。服务器期望数据为 Json。
我基本上希望服务器收到：{ 'img1': URL_HERE, 'img2': URL_HERE }

标签： javascript html ajax

【解决方案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);
            }
        })
    });
});

【讨论】：

更通用的方法可以在这里找到：stackoverflow.com/questions/1184624/…
有效。谢谢

【解决方案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);
            }
        })
    });
});

【讨论】：

【解决方案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())

【讨论】：

【解决方案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);
        }
    })
});

});

【讨论】：

$('#form').serialize() 不返回 JSON 吗？我正在尝试将 JSON 发送到服务器。
".serialize() 方法以标准 URL 编码表示法创建文本字符串。" api.jquery.com/serialize