Jquery 系列化表单
大家知道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 系列化表单的更多相关文章
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery Mobile 表单基础
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery实现表单验证
表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
随机推荐
- apache和tomcat的关系
apache和tomcat的关系: 举个例子:apache是一辆卡车,上面可以装一些东西如html等.但是不能装水,要装水必须要有容器(桶),tomcat就是一个桶(装像JAVA这样的水),而这个桶也 ...
- Jmeter之CSV文件读取
注意execl表生成的CSV文件的文件编码是GB2312和分隔符就好了
- 使用Rancher pipeline搭建基于容器的CICD
CICD概述 CI-持续集成(Continuous Integration):频繁地将代码集成到主干的一种开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错 ...
- leetcode 1.回文数-(easy)
2019.7.11leetcode刷题 难度 easy 题目名称 回文数 题目摘要 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 思路 一些一定不为回文数的 ...
- java的自增和自减
class Untitled { public static void main(String[] args) { int a = 3; int b = a++; //a先赋值给b,然后a再自己加1 ...
- 暑假集训第六周contest1
51Nod - 1413 权势二进制 题意:就是讲给出一个数n,让你求最少由多少个像0,1,10,11......这样的二进制数相加构成:样例n=9就是由9个二进制1相加组成,我不懂比赛的时候我为什么 ...
- HTTP的响应码?
响应头对浏览器来说很重要,它说明了响应的真正含义.例如200表示响应成功了,302表示重定向,这说明浏览器需要再发一个新的请求. l 200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览 ...
- Android studio常用快捷键与设置
1.格式化代码: 命令 快捷键 将代码合并成一行 Ctrl + Shift + J 格式化 Ctrl+Alt+L 2.API函数参数提示:双击选中所要提示的函数,再按F2即可显示函数的使用方法. 3. ...
- 多线程的join功能
import threading import time def thread_job(): print("T1 start\n") for i in range(30): tim ...
- Python获取内网IP
Python 获取本机内网IP 本文记录使用Python获取本机IP的两种方法. 通过hostname来获取本机IP import socket print(socket.gethostbyname( ...