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

Question

以下是我的代码（客户端），通过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 );
                    }
        });
});
});

以下是SPRING控制器(service)接收JSON数据的代码：

@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":"[e-mail]"},{"name":"mobile","value":"99868377"}] 但是，服务只接受以下JSON数据： { "firstName" : "John", "lastName" : "Miller", "email" : "[e-mail]", "mobile" : "99868377" } 如何将表单数据转换为单个 JSON对象而不是一个 JSON对象数组。

- Karthik

---

您可以在控制器方法中接受 List<CustomerDTO>。或者，您可以使用 $.serialize 函数代替 $.serializeArray()。 http://api.jquery.com/serialize/ - arnabkaycee

您可以在控制器方法中接受一个 List<CustomerDTO>。或者，如果您确定您的 JSON 数组中只有一个对象，那么您可以发送 data[0]。 - arnabkaycee

$.serialize 函数将不会将表单数据解析成JSON。 - Karthik

@Kartik没错。请参考第二条评论。 - arnabkaycee

当然，我会尝试的。谢谢。 - Karthik

data[0] 不起作用，因为它只返回 {"name":"firstName","value":"John"}。 - Karthik

Answer 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;
}

- Karthik