Jquery 将表单序列化为Json对象

大家知道Jquery中有serialize方法，可以将表单序列化为一个“&”连接的字符串，但却没有提供序列化为Json的方法。不过，我们可以写一个插件实现。

我在网上看到有人用替换的方法，先用serialize序列化后，将&替换成“：”、“‘”：

/**
* 重置form表单
* @param formId  form的id
*/
function resetQuery(formId){  var fid = "#" + formId;  var str = $(fid).serialize();  //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04  var ob= strToObj(str);  alert(ob.startdate);//2012-02-01
}  function strToObj(str){  str = str.replace(/&/g,"','");  str = str.replace(/=/g,"':'");  str = "({'"+str +"'})";  obj = eval(str);   return obj;
}

这个方案有个重大bug：如果输入框中本身有=怎么办呢？所以，我的方法是，先用serializeArray序列化为数组，再封装为Json对象。

表单：

<form id="myForm" action="#"><input name="name"/><input name="age"/><input type="submit"/>
</form>

Jquery插件代码：

(function($){$.fn.serializeJson=function(){var serializeObj={};$(this.serializeArray()).each(function(){serializeObj[this.name]=this.value;});return serializeObj;};
})(jQuery);

测试一下：

$("#myForm").bind("submit",function(e){e.preventDefault();console.log($(this).serializeJson());
});

测试结果：

输入a，b提交，得到序列化结果
{age: "b",name: "a"}

上面的插件，不能适用于有多个值的输入控件，例如复选框、多选的select。下面，我将插件做进一步的修改，让其支持多选。代码如下：

(function($){$.fn.serializeJson=function(){var serializeObj={};var array=this.serializeArray();var str=this.serialize();$(array).each(function(){if(serializeObj[this.name]){if($.isArray(serializeObj[this.name])){serializeObj[this.name].push(this.value);}else{serializeObj[this.name]=[serializeObj[this.name],this.value];}}else{serializeObj[this.name]=this.value; }});return serializeObj;};
})(jQuery);

这里，我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式，请自行修改相应代码。

表单：

<form id="myForm" action="#"><input name="name"/><input name="age"/><select multiple="multiple" name="interest" size="2"><option value ="interest1">interest1</option><option value ="interest2">interest2</option><option value="interest3">interest3</option><option value="interest4">interest4</option></select><input type="checkbox" name="vehicle" value="Bike" /> I have a bike<input type="checkbox" name="vehicle" value="Car" /> I have a car<input type="submit"/>
</form>

测试结果：

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}

转载于:https://www.cnblogs.com/jianliang-Wu/p/7110730.html

Jquery 将表单序列化为Json对象相关推荐

利用Jquery将表单序列化成JS对象
//表单序列化成JSON对象 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.eac ...
form表单序列化转换为json对象
form表单序列化转换为json对象 //form表单序列化转换为json对象 (function($){$.fn.serializeJson=function(){var serializeObj= ...
form表单序列化成json数据将空值用空字符串代替（form表单中checkBox数据会用逗号隔开拼接成字符串）...
2019独角兽企业重金招聘Python工程师标准>>> $.fn.notEmptyserializeJson = function () {var o = {};var a = th ...
jQuery序列化表单为JSON对象
[html] view plaincopy <form id="myform"> <table> <tr> <td>姓名:</ ...
php获取序列化表单,jQuery 序列化表单数据 serialize() serializeArray()
jQuery 序列化表单数据 serialize() serializeArray() 格式:var data = $("form").serialize(); 功能:将表单内容序 ...
JavaScriptSerializer类对象序列化为JSON，JSON反序列化为对象
JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据.说白了就是能够直接将一个C#对象传送到前台页面成为javascript对 ...
js对象序列化为json字符串
网上找了找将js对象序列化为json字符串的方法.结果都不近人意,最后自己写了一个. 注意你得自己为Date增加toString()方法. function Serialize(obj){switch ...
C# 对象序列化之序列化为Json文件（一）
目录 1.概念 1.1原理 1.2用途 1.3 JSON序列化 1.4 二进制和XML序列化 2. 序列化为JSON 2.1 简单的序列化 2.2 复杂的序列化 3 忽略属性 3.1 忽略单个属性 3 ...
php直接json_encnode对象,将PHP对象序列化为JSON
所以我在 php.net左右徘徊,了解有关将PHP对象序列化为JSON的信息,当我偶然发现新的 JsonSerializable Interface时.它只有PHP> = 5.4,我在5.3.x ...

Jquery 将表单序列化为Json对象

表单：

表单：

Jquery 将表单序列化为Json对象相关推荐

最新文章

热门文章