jQuery的ajax学习（一）表单序列化

js原生的ajax不仅要适配兼容，写起来也麻烦，数据类型也少。XMLHttpRequest的属性和方法也很复杂，在实际开发中，jQuery封装的ajax：$.ajax()明显更实用。在jquery中，$.ajax()方法属于最底层的方法，第2层是load，get，post方法，第三层是getScript，getJSON等方法。此外，还有很多实用的方法比如ajax全局方法等等。平时光用了，并不知道jquery'的实现过程，接下来结合jquery源代码来进行学习。以后有时间也会针对jQuery的其他功能进行源码解析学习。

一，表单序列化

我在以前实际用的过程中，一般是用选择器得到数据之后，再用$ajax()方法把数据放到url里面传过去。这么做既麻烦，可以传的数据也少。而jQuery已经准备了可以将DOM元素内容序列化的函数。

serialize()（序列化函数，筛选出表单中需要提交的数据并以序列化字符串方式返回，形如：“key=value&key=value…”）

serializeArray()（筛选出表单中需要提交的数据并以key/value键值对的对象数组格式返回，返回[{name:’key’,value:’select1’},{name:’selectM’,value:’selectM1’}, {name:’selectM’,value:’selectM2’}, { name:’key2’,value:0}…]）

param(serializeArray, traditional )（将key/value键值对的对象数组序列化为“key=value&key=value…”字符串）。

serialize直接调用jQuery.param( this.serializeArray() )即可。

先看看serializeArray的源码，下面这段代码为转载

[javascript]  view plain  copy

1. serializeArray: function() {  
2.     //将form中的表单相关的元素取出来组成数组  
3.     return this.map(function(){  
4.         //表单节点有elements这个特征  
5.         var elements = jQuery.prop( this, "elements" );  
6.         return elements ? jQuery.makeArray( elements ) : this;  
7.     })  
8.     //过滤出为需要提交的表单元素（有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素）  
9.     .filter(function(){  
10.         var type = this.type;  
11.         //使用.is(":disabled")过滤掉不可用的表单元素  
12.         return this.name && !jQuery( this ).is( ":disabled" ) &&  
13.         rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&  
14.         ( this.checked || !manipulation_rcheckableType.test( type ) );  
15.     })  
16.     //将表单提交元素组成name和value的对象数组  
17.     .map(function( i, elem ){  
18.         var val = jQuery( this ).val();  
19.         return val == null ?  
20.         null :  
21.         jQuery.isArray( val ) ?  
22.         jQuery.map( val, function( val ){  
23.             return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };  
24.         }) :  
25.         { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };  
26.     }).get();  
27. }  

总结一下，

第一步：将表单的所有元素取出来放到数组里面;

第二步：过滤出为需要提交的表单元素（有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素）

第三步：组合成key/value键值对的对象数组

param函数源码：

[javascript]  view plain  copy

1. jQuery.param = function( a, traditional ) {  
2.     var prefix,  
3.     s = [],  
4.     add = function( key, value ) {  
5.             //如果value是函数，执行他得到真正的value  
6.             value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );  
7.             //把key和value作为URI组件编码，保证key和value不会出现特殊符号，即保证了“=”分割的正确性  
8.             s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );  
9.         };  
10.   
11.     //传入的是数组,假设他是一个form表单键值对数组  
12.     if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {  
13.         //序列化表单元素  
14.         jQuery.each( a, function() {  
15.             add( this.name, this.value );  
16.         });  
17.     } else {  
18.         ...  
19.     }  
20.   
21.     //返回序列化结果，注意：空白符被替换成了"+"  
22.     return s.join( "&" ).replace( r20, "+" );  
23. };  

[javascript]  view plain  copy

1. 主要进行两个处理：将key/value成作为URI组件编码（保证key和value不会出现特殊符号，即保证了“=”分割的正确性）、使用“&”链接并将空白符被替换成了"+"  

js学得不扎实，读序列化源码就有点累了，感觉读后面的更会是囫囵吞枣。后面的不会从源码这么仔细的说明了。顶多是我阅读了之后，直接把大概过程说一下，应该

不会说这么仔细了。下一篇会直接将$.load() $.get() $.post() 的应用。等我js更扎实之后再回过头来看源码。