將form表單封裝成物件
阿新 • • 發佈:2019-01-06
通常,在提交欄位較少的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 , ... } 這樣格式的物件,使用了迴圈。