Jquery 系列化表单

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

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

 1 /**
 2      * 重置form表单
 3      * @param formId  form的id
 4      */
 5     function resetQuery(formId){
 6         var fid = "#" + formId;
 7         var str = $(fid).serialize();
 8         //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04
 9         var ob= strToObj(str);
10         alert(ob.startdate);//2012-02-01
11     }
12
13     function strToObj(str){
14         str = str.replace(/&/g,"‘,‘");
15         str = str.replace(/=/g,"‘:‘");
16         str = "({‘"+str +"‘})";
17         obj = eval(str);
18         return obj;
19     }  

个人感觉这样做有bug。

我的方法是,先用serializeArray序列化为数组,再封装为Json对象。

下面是表单:

1 <form id="myForm" action="#">
2     <input name="name"/>
3     <input name="age"/>
4     <input type="submit"/>
5 </form>

Jquery插件代码如下:

1 (function($){
2         $.fn.serializeJson=function(){
3             var serializeObj={};
4             $(this.serializeArray()).each(function(){
5                 serializeObj[this.name]=this.value;
6             });
7             return serializeObj;
8         };
9     })(jQuery);

下面测试一下:

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

测试结果:

输入a,b提交,得到序列化结果

{age: "b",name: "a"}

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

 1 (function($){
 2         $.fn.serializeJson=function(){
 3             var serializeObj={};
 4             var array=this.serializeArray();
 5             var str=this.serialize();
 6             $(array).each(function(){
 7                 if(serializeObj[this.name]){
 8                     if($.isArray(serializeObj[this.name])){
 9                         serializeObj[this.name].push(this.value);
10                     }else{
11                         serializeObj[this.name]=[serializeObj[this.name],this.value];
12                     }
13                 }else{
14                     serializeObj[this.name]=this.value;
15                 }
16             });
17             return serializeObj;
18         };
19     })(jQuery);

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

测试如下:

表单:

 1 <form id="myForm" action="#">
 2     <input name="name"/>
 3     <input name="age"/>
 4     <select multiple="multiple" name="interest" size="2">
 5         <option value ="interest1">interest1</option>
 6         <option value ="interest2">interest2</option>
 7         <option value="interest3">interest3</option>
 8         <option value="interest4">interest4</option>
 9     </select>
10     <input type="checkbox" name="vehicle" value="Bike" /> I have a bike
11     <input type="checkbox" name="vehicle" value="Car" /> I have a car
12     <input type="submit"/>
13 </form>

测试结果:

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

此文章转载至:http://my249645546.iteye.com/blog/1617872

Jquery 系列化表单

时间: 2024-10-12 03:15:19

Jquery 系列化表单的相关文章

第一百六十八节,jQuery,表单选择器

jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素. 一.常规选择器 我们可以使用 id.类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位. $('input').val(); //元素名定位,默认获取第一个

Jquery 将表单序列化为Json对象

使用下面代码时注意不要忘记引入jquery文件,以下代码可以复制到html文件中执行可看到效果,非常方便好用.附代码: <!DOCTYPE html> <html> <head> <title></title> <script src="jquery-2.0.3.min.js"> </script> </head> <body> <form id="myForm&

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

jQuery序列化表单时将制定元素排除在外

jQuery序列化表单时将制定元素排除在外:大家知道使用serialize()函数可以序列化一个表单,但是可能在实际应用中,需要将制定的表单元素排除在外,下面就通过实例代码演示一下如何实现此效果,代码实例如下: $("form[name='theform']").not($("input[type='hidden']")).not($("input[class='txt']")).serialize(); 上面代码只是一个演示,实际应用中要根据自

基于JQuery实现表单元素值的回写

form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html &

jQuery获取表单各元素的值

radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked",true);//设置第二项为选中项 <input type="text" name="textname" id="text_id" value="&quo

jquery将表单序列化json对象

$.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serializeArray(), function (i, o) { var n = o.name, v = o.value; count++; obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v]; }); //obj.

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法