今天我写项目的时候,出现了一个让我头疼的问题,这个问题就是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() 这个方法是核心.不知道是否有更好的方法,我现在还没有尝试。希望这篇博客能帮助到你!