form表单提交时自动将文本框的值序列化为json对象

form表单提交时自动将文本框的值序列化为json对象

form表单如下：

<form id="goodsSelect">
		<input name="userid" value="t001">
		<input name="goodsname" value="真皮草尼克大衣">
		<input name="goodsid" value="y001">
		<input name="goodsprice" value="200">
		颜色: <select name="goodscolor">
					<option value="蓝色">蓝色</option>
					<option value="黑色">黑色</option>
					<option value="红色">红色</option>
					<option value="绿色">绿色</option>
			  </select>
		尺码: <select name="goodssize">
					<option value="S">S</option>
					<option value="M">M</option>
					<option value="L">L</option>
					<option value="XL">XL</option>
			  </select>
		数量:<input name="goodsnumber" value="0">
		<button type="button" id="tocat" onclick="addToshoppingcat(this.id)">加入购物车</button>
</form>

Ajax如下：

//====== 加入购物车 =======
function addToshoppingcat(e){
	var goodsInfo = $(e).serializeObject();    //serializeObject()的作用既是序列号表单为json对象
	$.ajax({
			type:'post',
			url:'/xxxxxx/addtocatServlet',
			data:{
				'userid': goodsInfo.userid,
				'goodsid': goodsInfo.goodsid,
				'goodsname': goodsInfo.goodsname,
				'goodscolor': goodsInfo.goodscolor,
				'goodssize': goodsInfo.goodssize,
				'goodsnumber': goodsInfo.goodsnumber,
				'goodsprice': goodsInfo.goodsprice,
			},
			dataType:'text',
			success:function(res){
				alert(res);
				shoppcatlist();
			},
			error:function(msg){
				console.log(msg);
				console.log('加入购物车失败');
			}
		});
	return false;
}

测试结果如下：

如果提示找不到：serializeObject()方法

在你的js代码中加入serializeObject()方法即可：

//定义serializeObject方法，用于序列化表单为JSON对象
	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	};