关于前台ajax发送json格式数据，后台如何正确解析。

今天我写项目的时候，出现了一个让我头疼的问题，这个问题就是form表单序列化成json格式的数据，再通过ajax异步请求发送给后台controller,最后被对象正确解析。

我对前端知识非常的薄弱，只能简单的写一些demo来连接测试，遇到这个问题也是网上找了很多方法后来解决的。

先看一下如何封装form表单序列化的

 $.fn.serializeObject = function() {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function() {
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [ o[this.name] ];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            }


$.ajax({
                    url: "#",
                    type: "post",
                    dataType:"json",
                    data: $("#forms").serializeJson(),//表单序列化
                    contentType: "application/json ",//json数据格式
                    success:function (redata) {
                        console.log(redata);
                        if (redata.resultCode ==200){
                            console.log("请求成功！")
                        }
                    },
                    error:function () {
                        console.log("请求出错！")
                    }
                })

封装了一个方法然后调用  看data: $("#forms").serializeJson(),//表单序列化 直接写入ajax发送数据，后台解析出错！

后面我修改了一下 就变了两个地方！

第一步：var params = $("#forms").serializeObject();  （先将表单调用方法封装其数据）

第二部：data: JSON.stringify(params) 把这个对象使用这个方法封装了再发送。

结果后台正确解析了！！！

代码如下：

 $("#but2").click(function () {
                var params = $("#forms").serializeObject(); //将表单序列化为JSON对象
                $.ajax({
                    url: "#",
                    type: "post",
                    dataType:"json",
                    data: JSON.stringify(params) ,//表单序列化
                    contentType: "application/json ",//json数据格式
                    success:function (redata) {
                        console.log(redata);
                        if (redata.resultCode ==200){
                            console.log("请求成功！")
                        }
                    },
                    error:function () {
                        console.log("请求出错！")
                    }
                })
            })

 

发现这个问题其实是我自己错了很多次，然后我只好自己去封装一个json数据来使用的。具体请看下面代码。

先看一下我错误的引用代码：

 var json1 =    {"name":"xiao","age":"23","sex":"nan","qqno":"14056","tell":"136","address":"shanghai"}
            $("#but2").click(function () {
                // var params = $("#forms").serializeObject(); //将表单序列化为JSON对象

                $.ajax({
                    url: "#",
                    type: "post",
                    dataType:"json",
                    data: json1 ,//表单序列化
                    contentType: "application/json ",//json数据格式
                    success:function (redata) {
                        console.log(redata);
                        if (redata.resultCode ==200){
                            console.log("请求成功！")
                        }
                    },
                    error:function () {
                        console.log("请求出错！")
                    }
                })
            })

我先定义了一个 json1 然后直接在ajax使用，后台报错。json err.

之后我改进了一下，json1变量不变 只是ajax发送数据的时候使用一个JSON.stringify(json1)方法封装。代码如下

 var json1 = {"name":"xiao","age":"23","sex":"nan", "qqno":"14056","tell":"136","address":"shanghai"}
            $("#but2").click(function () {
                // var params = $("#forms").serializeObject(); //将表单序列化为JSON对象

                $.ajax({
                    url: "#",
                    type: "post",
                    dataType:"json",
                    data: JSON.stringify(json1),//表单序列化
                    contentType: "application/json ",//json数据格式
                    success:function (redata) {
                        console.log(redata);
                        if (redata.resultCode ==200){
                            console.log("请求成功！")
                        }
                    },
                    error:function () {
                        console.log("请求出错！")
                    }
                })
            })

然后成功了，这说明我第一次错误的发送json1后台并不能进行正确解析。

由于我本身前台知识很弱，我只能机械的认为，要ajax发送json数据JSON.stringify() 这个方法是核心.不知道是否有更好的方法，我现在还没有尝试。希望这篇博客能帮助到你！