如何使用 AJAX/jQuery 以 JSON 格式而不是带有键值对的 JSON POST 表单数据？答案

【问题标题】：How to POST form data in JSON format instead of JSON with key value pair using AJAX/jQuery?如何使用 AJAX/jQuery 以 JSON 格式而不是带有键值对的 JSON POST 表单数据？
【发布时间】：2019-09-17 00:33:17
【问题描述】：

我有一个表单用于将 JSON 键值对中的表单数据发布到 URL。与以下格式相同：

[{'name': 'URL', 'value': 'http://127.0.0.1:8000/test/addcustomer'}, {'name'：'FirstName'，'value'：'Abc'}，{'name'：'LastName'，'value'： 'Xyz'}, {'name': 'DOB', 'value': '123457'}, {'name': 'EmailAddress', 'value'：'example@gmail.com'}，{'name'：'Address1'，'value'：'123 街道'}, {'name': 'Address2', 'value': '11123'}, {'name': 'City', '值'：'Xyz'}，{'名称'：'状态'，'值'：'Pqr'}，{'名称'： '邮政编码', '值': '12345'}]

我想要下面的东西而不是这个：

[{'URL':'http://127.0.0.1:8000/test/addcustomer', 'FirstName':'Abc','LastName':'Xyz','DOB':'123457', '电子邮件地址'：'example@gmail.com'，'地址1'：'123 Street','Address2':'11123','City':'Xyz','State':'Pqr','PostalCode':'12345'}]

请参考以下代码：

$(document).ready(function(){
    $("#submit").on('click', function(){
     var a=document.forms["myForm"]["EmailAddress"].value;
     var b=document.forms["myForm"]["URL"].value;
        if (a==null || a=="" || b==null || b=="")
        {
            $("#EmailAddress").css("border-color", "#963634");
            $("#URL").css("border-color", "#963634");
            alert("Please fill Email Address and URL!!!");
            return false;
        }
        else
        $.ajax({
            url: b, 
            type : "POST",
            data : JSON.stringify($("#myForm").serializeArray()), 
            success : function(result) {
                alert(result);
                $("#myForm")[0].reset();
            },
            error: function() {
                alert('Please enter valid URL');
            }
        })
    });
});

【问题讨论】：

标签： jquery json ajax

【解决方案1】：

我会尝试类似：

        else
        {
            let formData = $("#myForm").serializeArray();
            let data = formData.reduce((acc, x) => acc[x.name] = x.value, {});
            $.ajax({
                url: b, 
                type : "POST",
                data : JSON.stringify(data), 
                success : function(result) {
                    alert(result);
                    $("#myForm")[0].reset();
                },
                error: function() {
                    alert('Please enter valid URL');
                }
            })
        }

reduce 行大致相当于：

// formData is in the form [ {'name': 'A', 'value': B}, {'name': 'X', 'value': Y},... ]
let data = {};
for (let item of formData)
    data[item.name] = item.value;
// data is now in the form { 'A': B, 'X': Y, ... }

【讨论】：