如何将表单数据作为单个 JSON 对象发送？答案

【问题标题】：How to send form data as a single JSON object?如何将表单数据作为单个 JSON 对象发送？
【发布时间】：2017-03-12 03:40:23
【问题描述】：

以下是我通过 JQUERY Ajax 调用以 JSON 格式发送表单数据的代码（客户端）

$(document).ready(function(){
    var contextroot = "/services/"
    $("#customerForm").submit(function(e){
        e.preventDefault();
        var form = $(this);
        var action = form.attr("action");
        var data = form.serializeArray();

        $.ajax({
                    url: contextroot+action,
                    dataType: 'json',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(data){
                        console.log("DATA POSTED SUCCESSFULLY"+data);
                    },
                    error: function( jqXhr, textStatus, errorThrown ){
                        console.log( errorThrown );
                    }
        });
});
});

下面是接受 JSON 数据的 SPRING 控制器（服务）

@RequestMapping(value="/customer/create", method = RequestMethod.POST)
    public CustomerDTO create(@RequestBody CustomerDTO customerDTO) {
        return customerService.create(customerDTO);
    }

提交表单时，我收到以下错误
HTTP400: BAD REQUEST - 由于语法无效，服务器无法处理请求。

我猜这个错误是因为表单数据被序列化为 JSON 对象数组，而不仅仅是请求正文中的 JSON 对象，如下所示

[{"name":"firstName","value":"John"},{"name":"lastName","value":"Miller"},{"name":"email ","value":"John@gmail.com"},{"name":"mobile","value":"99868377"}]

但是，服务只接受以下 JSON 数据
{ “名字”：“约翰”， “姓氏”：“米勒”， “电子邮件”：“John.kp@gmail.com”， “手机”：“99868377” }

如何将表单数据转换为单个 JSON 对象，而不是 JSON 对象数组。

【问题讨论】：

您可以在控制器方法中接受List<CustomerDTO>。或者您可以使用$.serialize 函数代替$.serializeArray()。 api.jquery.com/serialize
您可以在控制器方法中接受List<CustomerDTO>。或者你可以发送数据[0]，如果你确定你的 JSON 数组中只有一个对象。
$.serialize 函数不会将表单数据解析为 JSON
@Kartik 对。请参考第二条评论
当然。我会试试的。谢谢

标签： jquery json spring-mvc form-submit

【解决方案1】：

我终于找到了解决办法。我编写了一个生成 JSON 对象的实用方法

$(document).ready(function(){
    var contextroot = "/services/"
    $("#customerForm").submit(function(e){
        e.preventDefault();
        var form = $(this);
        var action = form.attr("action");
        var data = form.serializeArray();

        $.ajax({
                    url: contextroot+action,
                    dataType: 'json',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(getFormData(data)),
                    success: function(data){
                        console.log("DATA POSTED SUCCESSFULLY"+data);
                    },
                    error: function( jqXhr, textStatus, errorThrown ){
                        console.log( errorThrown );
                    }
        });
});
});

//utility function
function getFormData(data) {
   var unindexed_array = data;
   var indexed_array = {};

   $.map(unindexed_array, function(n, i) {
    indexed_array[n['name']] = n['value'];
   });

   return indexed_array;
}

【讨论】：