jQuery的ajax学习(一)表单序列化
来源:互联网 发布:vb控件随窗体变化 编辑:程序博客网 时间:2024/05/17 23:52
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的源码,下面这段代码为转载
serializeArray: function() { //将form中的表单相关的元素取出来组成数组 return this.map(function(){ //表单节点有elements这个特征 var elements = jQuery.prop( this, "elements" ); return elements ? jQuery.makeArray( elements ) : this; }) //过滤出为需要提交的表单元素(有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素) .filter(function(){ var type = this.type; //使用.is(":disabled")过滤掉不可用的表单元素 return this.name && !jQuery( this ).is( ":disabled" ) && rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) && ( this.checked || !manipulation_rcheckableType.test( type ) ); }) //将表单提交元素组成name和value的对象数组 .map(function( i, elem ){ var val = jQuery( this ).val(); return val == null ? null : jQuery.isArray( val ) ? jQuery.map( val, function( val ){ return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }) : { name: elem.name, value: val.replace( rCRLF, "\r\n" ) }; }).get();}总结一下,
第一步:将表单的所有元素取出来放到数组里面;
第二步:过滤出为需要提交的表单元素(有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素)
第三步:组合成key/value键值对的对象数组
param函数源码:
jQuery.param = function( a, traditional ) { var prefix, s = [], add = function( key, value ) { //如果value是函数,执行他得到真正的value value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value ); //把key和value作为URI组件编码,保证key和value不会出现特殊符号,即保证了“=”分割的正确性 s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value ); }; //传入的是数组,假设他是一个form表单键值对数组 if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { //序列化表单元素 jQuery.each( a, function() { add( this.name, this.value ); }); } else { ... } //返回序列化结果,注意:空白符被替换成了"+" return s.join( "&" ).replace( r20, "+" );};
主要进行两个处理:将key/value成作为URI组件编码(保证key和value不会出现特殊符号,即保证了“=”分割的正确性)、使用“&”链接并将空白符被替换成了"+"
js学得不扎实,读序列化源码就有点累了,感觉读后面的更会是囫囵吞枣。后面的不会从源码这么仔细的说明了。顶多是我阅读了之后,直接把大概过程说一下,应该
不会说这么仔细了。下一篇会直接将$.load() $.get() $.post() 的应用。等我js更扎实之后再回过头来看源码。
- jQuery的ajax学习(一)表单序列化
- jQuery的ajax学习(一)表单序列化
- Jquery ajax序列化表单
- jQuery ajax 中级(getScript() ; getJSON() ;ajax; 表单序列化)
- jQuery序列化Ajax提交表单
- jquery序列化表单并ajax提交
- jQuery--9.$.ajax(),表单序列化,formdata
- JS-jquery ajax序列化表单多选框传值
- jQuery.ajax $.post $.load 序列化表单(ajax提交表单,post传递参数,序列化表单)
- jQuery教程(19)-jquery ajax操作之序列化表单
- 关于jquery序列化表单的使用,以及jquery-ajax上传文件
- Ajax序列化表单
- ajax表单序列化
- 关于jQuery使用serializeArray()序列化表单数据,使用FormData()实现AJAX请求的问题
- jQuery ajax序列化表单数据 serialize() serializeArray()函数的使用
- jquery表单序列化
- jquery表单序列化
- jQuery序列化表单的方法总结(serialize()、serializeArray())
- [LeetCode]414. Third Maximum Number
- android获取位置和计算两个位置坐标
- Struts2.5环境搭建
- redis配置文件 属性说明
- android Handler Message MessageQueue Looper ThreadLocal源码解读
- jQuery的ajax学习(一)表单序列化
- 关于Unix哲学
- 排序算法(一)——冒泡排序及改进
- 关于nginx集群配置问题
- Hibernate中HQL占位符的一点使用技巧
- 异常debug之GNU工具使用
- 面试题15解析-守护线程 / JAVA多线程问题及其补充
- MediaPlayer+SurfaceHolder播放工具类
- Android在apk更新的时候数据库改变的(只限于在数据库末尾添加新字段)