Versuchen Sie, die Unterschiede und Anwendungsbeispiele von serializeArray, param und serializeArray von jquery zu vergleichen.

jQuery.param( obj, traditionell)

ist eine URL-Abfrage oder Ajax. Konvertieren Sie Objekt oder Array in URL-Parameter oder Ajax-Parameter. ja Die am jQuery-Objekt hängende statische Methode hat den Code und die Wahrheit:

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"

Es ist ersichtlich, dass der zweite Parameter ähnlich ist um die Tiefe zu kontrollieren.

Quellcode

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

Dieser wird in jQuery.fn eingebunden Methode ein, konvertieren Sie das aktuelle jQuery Formularobjekt in ein Array-Objekt, Instanz

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

verwendet in it Die get-Methode ist sehr einfach

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

Was die jQuery.prop-Methode betrifft, ist ein neuer Artikel erforderlich, um sie vorzustellen. Einfach ausgedrückt geht es darum, die Requisite des Elements zu erhalten. element.checked, element.value, getrennt von attr

.serialize

Serialize ist einfach und entspricht serializeArray + parmp. Konvertieren Sie das Formular direkt in eine URL-Abfrage String . Der Code ist auch einfach. Auch auf jQuerys fn

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

Das obige ist der detaillierte Inhalt vonVersuchen Sie, die Unterschiede und Anwendungsbeispiele von serializeArray, param und serializeArray von jquery zu vergleichen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!