Try to compare the differences and usage examples of jquery's serializeArray, param and serializeArray.

jQuery.param( obj, traditional )

Convert object or array to url parameter or ajax parameter for url query or ajax, yes The static method hanging on the jQuery object has the code and the truth:

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

It can be seen that the second parameter is similar to controlling the depth.

Source code

// 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()

This is mounted on the jQuery.fn method , convert the current jQuery form object into an array object, and the get method used in the instance

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();//转为真正的数组
    }

is very Simple

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()

As for the jQuery.prop method, a new article is needed to introduce it. Simply put, it is to get the prop of the element. element.checked, element.value, are separated from attr

.serialize

serialize is simple, equivalent to serializeArray + parmp, convert the form directly into url query String. The code is also simple. The same is on the fn of jQuery

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

The above is the detailed content of Try to compare the differences and usage examples of jquery's serializeArray, param and serializeArray.. For more information, please follow other related articles on the PHP Chinese website!