Jquery表单序列化(serialize、serializeArray、serializeJson)及序列化后追加参数
文章目录
表单提交的原则
- 提交结果
结论一:name相同的表单提交格式
如果name值相同的表单提交,该name值会出现多次,且对应不同表单的值
结论二:没有name的表单、disabled的表单
表单元素没有name属性、含有disabled属性都会被禁止提交
在进行表单控制时,如果某一个表单即不可以被编辑但同时也需要被提交,可以设置readonly属性,通过给含有readonly属性的表单添加特定的css样式来模拟disabled的样式。
结论三:redio、checkbox选中值却没有value属性
如结果图所示:只会提示当前name表单为on,不会自动获取text的值。如果没有选中值,就不会提交该表单元素,即不会出现当前name表单为off的情况
结论四:被选中的option没有value属性
会提交该name表单,但是提交的值为空字符串
表单序列化的三种方式
serialize()
源码实现
function buildParams( prefix, obj, traditional, add ) {
var name;
if ( Array.isArray( obj ) ) {
// Serialize array item.
jQuery.each( obj, function( i, v ) {
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.
buildParams(
prefix + "[" + ( typeof v === "object" && v != null ? i : "" ) + "]",
v,
traditional,
add
);
}
} );
} else if ( !traditional && toType( obj ) === "object" ) {
// Serialize object item.
for ( name in obj ) {
buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
}
} else {
// Serialize scalar item.
add( prefix, obj );
}
}
jQuery.param = function( a, traditional ) {
var prefix,
s = [],
add = function( key, valueOrFunction ) {
// If value is a function, invoke it and use its return value
var value = isFunction( valueOrFunction ) ?
valueOrFunction() :
valueOrFunction;
s[ s.length ] = encodeURIComponent( key ) + "=" +
encodeURIComponent( value == null ? "" : value );
};
if ( a == null ) {
return "";
}
// If an array was passed in, assume that it is an array of form elements.
if ( Array.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
// Serialize the form elements
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 ) {
buildParams( prefix, a[ prefix ], traditional, add );
}
}
// Return the resulting serialization
return s.join( "&" );
};
serialize: function() {
return jQuery.param( this.serializeArray() );
}
使用说明
- 作用:对表单元素进行序列化处理,得到编码后的字符串
- 使用方式:可是获取整个form表单的序列化值也可以获取单独某个表单元素的序列化值
- 参数:无参数
代码示例
//username=Lucy&username=%E8%B7%AF%E8%A5%BF&sex=on&hobby=1&age=28&groups=groups1
$("#submitBtn").click(function() {
let serialize = $("#form").serialize();
console.log(serialize);
});
serializaArray()
源码实现
//rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
//rsubmittable = /^(?:input|select|textarea|******)/i;
serializeArray: function() {
return this.map( function() {
// Can add propHook for "elements" to filter or add form elements
var elements = jQuery.prop( this, "elements" );
console.log(elements)
return elements ? jQuery.makeArray( elements ) : this; //获取form表单中的表单元素为数组
} )
//说明:无法序列化无name属性,disabled表单的原因
.filter( function() {
var type = this.type;
return this.name && !jQuery( this ).is( ":disabled" ) &&
rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
( this.checked || !rcheckableType.test( type ) );
} )
.map( function( i, elem ) {
var val = jQuery( this ).val();
if ( val == null ) {
return null;
}
if ( Array.isArray( val ) ) {
return jQuery.map( val, function( val ) {
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
} );
}
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
} ).get();//get函数如果有参数获取数组值,如果无参数获取整个纯净的数组
}
使用说明
- 作用:将表单元素转换为{name:name值,value:value值}格式的对象数组
- 使用对象:可以获取整个表单元素的数组也可以获取单个表单元素的数组
- 参数:无参数
使用示例
$("#primary").click(function() {
let serializeArray = $("#form").serializeArray();
console.log(serializeArray);
});
运行结果
serializeJSON()
- jquery没有直接提供serializeJSON方法,但是提供了jquery.serializeJSON插件
CDN链接地址
//或者直接引入该script标签
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
使用说明
- 作用:将表单元素转换为json格式的json字符串
- 使用对象:可以获取整个表单元素的数组也可以获取单个表单元素的数组
- 参数:无参数
使用示例
$("#success").click(function() {
let serializeJson = $("#form").serializeJSON();
console.log(serializeJson);
});
在序列化后添加参数
原理
由serialize函数的源码可以看出,序列化的本质在于对表单数组执行$.param()方法,对值进行编码拼接。所以单独的对对象进行编码拼接后和执行serialize函数得到的字符串格式是一致的。
实现
let param = $.param({param1:"参数1" , param2:"参数2"})+"&"+$form.serialize();