jquery Form表单数据获取 并输出为Json格式

本方式主要通过对JQuery中原有的方法serialize() serializeArray() 进行再封装;使输出的数据为JSON格式

<div class='sxccb-title-inputPhone'>
	<form id='form'>
	<input type="number" placeholder="请输入手机号码" name='phone'/>
	</form>
	<div class='button-sin'>确定</div>
</div>

我们可以先看看原始的方法输出的格式

console.log($('#form').serialize())//phone=139969859***
console.log($('#form').serializeArray())
//[{…}]
//0: {name: "phone", value: "139969859***"}
//length: 1
//__proto__: Array(0)

然后我们通过对这两种方式进行处理
封装一个方法parseForm()

$.fn.parseForm=function(){
	let serializeObj={};
	let array=this.serializeArray();
	let str=this.serialize();
	$(array).each(function(){
		if(serializeObj[this.name]){
			if($.isArray(serializeObj[this.name])){
				serializeObj[this.name].push(this.value);
			}else{
				serializeObj[this.name]=[serializeObj[this.name],this.value];
			}
		}else{
			serializeObj[this.name]=this.value; 
		}
	});
	return serializeObj;
};

然后我们再来看看输出的格式是怎么样的

{phone: "139969859***"}

这就达到了我们的要求。

你可能感兴趣的:(jquery Form表单数据获取 并输出为Json格式)