jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何将表单数据作为单个JSON对象发送?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
下面是我的代码(客户端),通过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”: “名字”,“值”: “约翰”},{ “名”: “姓氏”,“值”: “米勒”},{ “名”: “电子邮件”,“价值”: “John@gmail.com”},{名称”: “移动”,“值”: “99868377”}]

但是,服务仅接受以下JSON数据
{
  “firstName”:“约翰”,
  “lastName”:“米勒”,
  “email”:“John.kp @ gmail.com”,
  “mobile”:“99868377”
}

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

解决方法

我终于找到了解决方案.我编写了一个生成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,data: JSON.Stringify(getFormData(data)),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;
}

大佬总结

以上是大佬教程为你收集整理的jquery – 如何将表单数据作为单个JSON对象发送?全部内容,希望文章能够帮你解决jquery – 如何将表单数据作为单个JSON对象发送?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。