0

0

尝试比较jquery的serializeArray、param 与serializeArray 的区别与用法实例详解

巴扎黑

巴扎黑

发布时间:2017-07-03 13:57:39

|

1534人浏览过

|

来源于php中文网

原创

jquery.param( obj, traditional )

为url查询或者ajax 将对象或者数组转为url参数或ajax参数,是挂在jquery对象上的静态方法,有码有真相:


var myInfo = {
        userid:'123',
        fullname:['henry','li'],
        intro:{html:5, css:3}            
    };
    console.log($.param(myInfo));    //"userid=123&fullname[]=henry&fullname[]=li&intro[html]=5&intro[css]=3"
    //userid=123&fullname[]=henry&fullname[]=li&intro[html]=5&intro[css]=3"
    console.log($.param(myInfo),true);    //"a=[object+Object]&b=1&b=2&b=3"
    //"a=[object+Object]&b=1&b=2&b=3"

可以看出第二个参数类似于控制深度。

源码


// Serialize an array of form elements or a set of// key/values into a query stringjQuery.param = function( a, traditional ) {    var prefix,// 循环的键命名 for(var k in)  这里即k
        s = [],//返回的数据
        add = function( key, value ) {            //key value对应循环中每项的name和值如:<input name="" value=""、{key:value}
            // 如果value是function,那么计算出返回值
            value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );            //转为key1=value&key2=value2的形式
            s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
        };    // Set traditional to true for jQuery <= 1.3.2 behavior.
    // 设置第二个参数,如果第二个参数等于undefined,取jQuery.ajaxSettings.traditional
    if ( traditional === undefined ) {
        traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
    }    // If an array was passed in, assume that it is an array of form elements.
    // 第一个参数为数组或者表单的elements
    // 为数组或者jquery表单对象,不存在第二个参数的问题(a[]=1;a[]=2)
    if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {        // Serialize the form elements
        // 循环取name与value
        jQuery.each( a, function() {
            add( this.name, this.value );
        });

    } else {        // If traditional, encode the "old" way (the way 1.3.2 or older
        // did it), otherwise encode params recursively.
        // 为对象的时候,需要照顾第二个参数,即深度
        for ( prefix in a ) {            //调用另外一个方法,传入key,obj[k],深度,add回调方法            buildParams( prefix, a[ prefix ], traditional, add );
        }
    }    // Return the resulting serialization
    return s.join( "&" ).replace( r20, "+" );
};var r20 = /%20/g,
    rbracket = /\[\]$/,
    rCRLF = /\r?\n/g,
    rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
    rsubmittable = /^(?:input|select|textarea|keygen)/i;    
function buildParams( prefix, obj, traditional, add ) {    var name;    if ( jQuery.isArray( obj ) ) {        // Serialize array item.
        // 数组分支
        jQuery.each( obj, function( i, v ) {            // 如果第二个参数为真,则直接调用自身会生成类似 a=object  这样的数组
            // 或者参数为“数组”  key[0]或者key[name]
            if ( traditional || rbracket.test( prefix ) ) {                // Treat each array item as a scalar.
                // 处理                add( prefix, v );

            } else {                // Item is non-scalar (array or object), encode its numeric index.
                //反之参数key设置为 key[i] 循环调用自身,这时候循环中的自身会进入下一步
                buildParams( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );
            }
        });

    } else if ( !traditional && jQuery.type( obj ) === "object" ) {        //如果参数不为真,调用自身,进入第一步
        // Serialize object item.
        for ( name in obj ) {
            buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
        }

    } else {        // Serialize scalar item.
        // 每项的操作        add( prefix, obj );
    }
}

.serializeArray()

这个是挂载在jQuery.fn方法上的,将当前jQuery form对象转为数组对象,实例

 


var r20 = /%20/g,
    rbracket = /\[\]$/,
    rCRLF = /\r?\n/g,
    rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
    rsubmittable = /^(?:input|select|textarea|keygen)/i;
serializeArray: function() {        //jQuery.fn.map
        return this.map(function() {            // Can add propHook for "elements" to filter or add form elements
            // 如果当前对象具有elements的prop,则使用,反之使用自身
            // elements是原生js中表单所有的input。 如:document.forms[0].elements
            var elements = jQuery.prop( this, "elements" );            return elements ? jQuery.makeArray( elements ) : this;
        })
        .filter(function() {//jQuery.fn.filter
            var type = this.type;            // Use .is(":disabled") so that fieldset[disabled] works
            // 过滤掉没有name、disabled的、可以提交的几个标签,如过是可选中的元素,则checked为真
            return this.name && !jQuery( this ).is( ":disabled" ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );
        })
        .map(function( i, elem ) {////jQuery.fn.map
            var val = jQuery( this ).val();            //设置value
            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();//转为真正的数组
    }

其中使用的get方法就很简单了

Thiings
Thiings

免费的拟物化图标库

下载


get: function( num ) {        return num != null ? 

            // Return a 'clean' array
            ( num < 0 ? this[ num + this.length ] : this[ num ] ) : 

            // Return just the object
            slice.call( this );
    }//我们也可以使用自己的get方法。如: // Array.prototype.slice.call($('p'),0,1)//取到第一个p dom元素,相当于$('p').get(0)// Array.prototype.slice.call($('p'))//取到所有,相当于$('p').get()


至于jQuery.prop方法,需要新起一篇文章介绍了。简单的说,就是获取元素的prop。  element.checked、element.value,是从attr中分离出来的

.serialize

serialize就简单了,相当于serializeArray + parmp,将表单直接转为url查询字符串。代码也简单。同样是在jQuery的fn上

 


serialize: function() {        return jQuery.param( this.serializeArray() );
},

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

1142

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

371

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

245

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

37

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

114

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

77

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

17

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

863

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

123

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 6.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 11.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号