大家知道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"]}

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

Jquery 系列化表单的更多相关文章

  1. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  3. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  4. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  5. jQuery实现表单验证

    表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...

  6. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  7. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  8. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. 通过AJAX和PHP,提交JQuery Mobile表单

    File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...

随机推荐

  1. 苹果联合创始人高调宣布弃用Facebook是什么梗?

    这段时间,扎克伯格非常郁闷.泄密丑闻不仅让Facebook股价大跌.引来审查等,还被众多互联网.科技大佬批判.孤立.如,"钢铁侠"马斯克就直接删除了SpaceX 和特斯拉的 Fac ...

  2. 推荐几位jenkins发布war包和jar包大佬的博客

    jenkins部署tomcat的war包和jar包 https://blog.csdn.net/liuxiaoming1109/article/details/89311696  

  3. Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题

    本文为原创文章,转载请标明出处 目录 使用 videogular2 安装 增加图标.字体支持 导入 module 举个例子 遇到的问题 iOS 端自动进入全屏播放 Android 端 autoplay ...

  4. ajax学习相关

    choices参数 当存在某个字段的值只有有限的几个时,如性别(只有男.女),婚否(已婚.未婚)等,这种情况,我们可以用数字来代替这些中文字符,可以减轻数据库的负担,这时,就需要用到choices参数 ...

  5. SIM卡的消失会让运营商们恐慌吗?

    ​中国移动.联通.电信三大运营商原本高高在上,每天乐滋滋地数钱数到手抽筋,但近年来移动互联网的快速普及,让运营商的制霸状态不复存在.成为众多互联网公司的"流量通道",语音.短信等业 ...

  6. 未来京东真能成为中国第一大B2C电商平台吗?

    ​     2月10日,京东集团在北京举行2017年"科技引领未来"开年年会.在本届年会上,京东宣布全面向技术转型.京东集团CEO刘强东正式对外公布未来12年的战略:在以人工智能为 ...

  7. 5——PHP逻辑运算符&&唯一的三元运算符

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  8. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  9. 《前端之路》--- 重温 Egg.js

    目录 <前端之路>--- 重温 Egg.js 一.基础功能 > 日志系统包含了 四大层面的 日志对象, 分别是 App Logger.App CoreLogger.Context L ...

  10. 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...