jQuery - 基于serializeArray的serializeObject

原文地址

http://blog.csdn.net/flashdelover/article/details/8185775

jQuery有方法$.fn.serialize,可将表单序列化成字符串;有方法$.fn.serializeArray,可将表单序列化成数组。
如果需要其序列化为JSON对象,那么可以基于serializeArray编写方法serializeObject轻松实现:

//work with jQuery 1.x
jQuery.prototype.serializeObject=function(){
    var obj=new Object();
    $.each(this.serializeArray(),function(index,param){
        if(!(param.name in obj)){
            obj[param.name]=param.value;
        }
    });
    return obj;
}; 

注:当表单中参数出现同名时,serializeObject会取第一个,而忽略后续的。

设有

<form>
    <input type="text" name="username" />
    <input type="text" name="password" />
</form> 

jQuery("form").serialize(); //"username=&password="
jQuery("form").serializeArray(); //[{name:"username",value:""},{name:"password",value:""}]
jQuery("form").serializeObject(); //{username:"",password:""}  

20150125更新
===========
+ 此版本不再兼容IE8
+ 修复一个逻辑错误

//work with jQuery 2.x
jQuery.prototype.serializeObject=function(){
    var hasOwnProperty=Object.prototype.hasOwnProperty;
    return this.serializeArray().reduce(function(data,pair){
        if(!hasOwnProperty.call(data,pair.name)){
            data[pair.name]=pair.value;
        }
        return data;
    },{});
}; 

20150705更新
===========

+ 减少方法依赖,扩大兼容范围
+ 改用原生循环,提升代码性能

//work with jQuery Compact 3.x
jQuery.prototype.serializeObject=function(){
    var a,o,h,i,e;
    a=this.serializeArray();
    o={};
    h=o.hasOwnProperty;
    for(i=0;i<a.length;i++){
        e=a[i];
        if(!h.call(o,e.name)){
            o[e.name]=e.value;
        }
    }
    return o;
};  
时间: 2024-10-13 23:30:19

jQuery - 基于serializeArray的serializeObject的相关文章

jQuery -&gt; 基于当前元素的遍历

pcDuino3下支持mmc启动,官方的Uboot是采用SPL框架实现的,因为内部的SRAM空间达到32K,我们完全可以在这32K空间内编写一个完整可用小巧的bootloader来完成引导Linux kernel的目的. 我们首先介绍下SPL框架,可以先看下<GNU ARM汇编--(十八)u-boot-采用nand_spl方式的启动方法>和<GNU ARM汇编--(十九)u-boot-nand-spl启动过程分析>,NAND_SPL也算是SPL框架下的一种模式. 当使用Nand f

jQuery基于ajax实现星星评论代码

本文实例讲述了jQuery基于ajax实现星星评论代码.分享给大家供大家参考.具体如下: 这里使用jquery模仿点评网的星星评论功能,Ajax评论模块,鼠标点击星星即可评价,下边是分数,可以点击后给分,网上很流行的效果,本代码相对完整,相信很多朋友会喜欢的. 先来看看运行效果截图: <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">

jQuery使用serializeArray()方法取得表单数据并附加json数据

转载自:http://blog.csdn.net/zheng963/article/details/49156395 一.serialize()方法1.格式var data = $("form").serialize();2.功能将表单内容序列化成一个字符串.3.返回结果username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBoo

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

jQuery中serializeArray方法的使用及对象与字符串的转换

使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息,转化为多个{name:xx,value:xx}对象的数组, 再使用遍历的方式可以方便的将数组转化为json对象, 代码如下 <p id="results"><b>Results: </b> </p> <form> <select name="single"> <option>Single</o

jQuery 的 serializeArray()、serialize() 方法

serializeArray()方法说明: 实例 输出以数组形式序列化表单值的结果: $("button").click(function(){ x=$("form").serializeArray(); $.each(x, function(i, field){ $("#results").append(field.name + ":" + field.value + " "); }); }); 亲自试一

jQuery ajax - serializeArray() 方法

定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法 $(selector).serializeArray() 详细说明 serializeArray() 方法序列化表单元素,返回 JSON 数据结构数据. 注意:此方法返回的是 JSON 对象而非 JSON 字符串.需要使用插件或者第三方库进行字符串化操作,如: var formInfo = $

jQuery的serializeArray()方法详解

<script type="text/javascript"> //验证不为空提交 function editSubmitcheck() { var cityID = $("#editCityID").val().trim(); var cityName = $("#editCityName").val().trim(); var comment = $("#editComment").val().trim();

jQuery基于json与cookie实现购物车的方法

/** * 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数 */ function AddToShoppingCar(id, num, type) { var _num = 1; if (num != undefined){ _num = num; } if (type == undefined){ alert("请设置产品种类"); return false; } var totalNum = _num; //总数默认为传入参数 var cookieSet