1. 程式人生 > >jQuery序列化表單為JSON物件

jQuery序列化表單為JSON物件

<form id="myform">
	<table>
		<tr>
			<td>姓名:</td>
			<td> <input type="text" name="name" /> </td>
		</tr>
		<tr>
			<td>性別:</td>
			<td>
				<input type="radio" name="sex" value="1"> 男
				<input type="radio" name="sex" value="0"> 女
			</td>
		</tr>
		<tr>
			<td>年齡:</td>
			<td>
				<select name="age">
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>愛好</td>
			<td>
				<input type="checkbox" value="basketball" name="hobby">籃球
				<input type="checkbox" value="volleyball" name="hobby">排球
				<input type="checkbox" value="football" name="hobby">足球
				<input type="checkbox" value="earth" name="hobby">地球
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" id="ajaxBtn" value="提交" />
			</td>
		</tr>
	</table>
</form>
<script type="text/javascript">
	
	$(function() {
		$("#ajaxBtn").click(function() {
			    var params = $("#myform").serializeObject(); //將表單序列化為JSON物件 
				console.info(params);
			})
	})

	$.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;
	}
</script>

上述serializeObject方法是將form序列化為JSON物件