將form表單封裝成對象

        通常,在提交字段較少的form中,我們可以在控制層直接用多字段參數去接收。但在字段較多,比如一個from表單中包含十幾個甚至二十幾個字段時,控制層再用單個字段來一個一個接收的話,參數就會非常多,並且代碼可讀性也大大降低。因此將字段封裝成對象,再將對象傳回控制層,就大大簡化了代碼。具體方法如下:


HMTL:

<form id="tempForm">
	<div class="row">
		<label>系統編碼:</label> 
		<input type="text" name="invSys">
	</div>
	<div class="row">
		<label>系統名稱:</label> 
		<input type="text" name="sysName">
	</div>
	<div class="row">
		<label>系統類型:</label> 
		<input type="text" name="sysType">
	</div>
	<div class="row">
		<label>狀 態:</label> <select name="state">
			<option value="1">有效</option>
			<option value="0">無效</option>
		</select>
	</div>
	<div class="row">
		<label>定義人員:</label> 
		<input type="text" name="confStaff">
	</div>
	<div class="row">
		<label>操作時間:</label> 
		<input type="text" name="confDate">
	</div>
	<div class="row">
		<input value="保存" type="button" onclick="update();">
	</div>
</form>

JavaScript:

function serializeForm(a) {// 參數爲form標籤
	var resultJson = {};// 要傳遞給後臺的對象數據
	var array = a.serializeArray();// 序列化表單內容
	$(array).each(function() {
		resultJson[this.name] = this.value.trim();
	});
}

        在序列化form時,使用的是serializeArray(),得到的是一個對象數組,並不是我們最終想要的對象,格式爲 [ { name : invSys , value : invSysValue } , ... ] 。因此需要對這個對象數組進行處理,封裝成我們所需要的 { invSys : invSysValue , ... } 這樣格式的對象,使用了循環。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章