form表單序列化為Jquery對象

標籤：列印   console   push   value   financial   val   select   hold   tail   

 1 <form id="DailyFinancial" > @*class="form-inline"*@ 2           <div class="form-group"> 3             <label for="FinancialType">記賬類型</label> 4             <select class="form-control" id="FinancialType" name="FinancialType"> 5               <option value="1">支出</option> 6               <option value="2">收入</option> 7             </select> 8           </div> 9           <div class="form-group">10             <label for="FinancialType">收支類型</label> 12             <select class="form-control" id="Type" name="Type">13               <option value="10">吃飯</option>25             </select>26             <p class="help-block" style="color:red">收支類型->花錢和賺錢方式</p>27           </div>28           <div class="form-group">29             <label for="Money">金額</label>30             <input type="text" class="form-control" id="Money" name="Money" placeholder="人民幣">31           </div>32           <div class="form-group">33            <label for="Detail">收支明細</label>34             <textarea class="form-control" rows="2" id="Detail" name="Detail"></textarea>35           </div>36            <div class="form-group">37             <label for="PayType">支出類型</label>39             <select class="form-control" id="PayType" name="PayType">40               <option value="0">信用卡</option>46             </select>48           </div>49           <div class="form-group">50            <label for="Remark">備忘</label>51             <textarea class="form-control" rows="2" id="Remark" name="Remark"></textarea>52           </div>     53           <div class="form-group">54            <label for="Remark2">備忘</label>55             <textarea class="form-control" rows="2" id="Remark2" name="Remark"></textarea>56           </div>     57  </form>

 1 var o = {}; 2  var arr = $("#DailyFinancial").serializeArray();// 直接序列化成對象數組，每個對象由name和value組成 3 $.each(arr,function (i,v) { 4    if (o[this.name]) { 5    　　if (!o[this.name].push) { //判斷o[this.name]的值是否為數組，true表示數組，false表示不是數組 6         o[this.name] = [o[this.name]]; //o[this.name]的值設定為數組 7        } 8        o[this.name].push(this.value || ‘‘); //在數組後追加新的元素 9    }else {10        o[this.name] = this.value || ‘‘;11       }12  });13 console.log(o);

用 $("#DailyFinancial").serializeArray()把form表單的值序列化成對象數組；

用$.each函數遍曆數組，遍曆每個對象(如果存在重複的name，則他的值用數組來接受)組裝成jQuery對象

瀏覽器列印結果如下：Object {FinancialType: "1", Type: "10", Money: "", Detail: "", PayType: "0"…}

註：!o[this.name].push ->當屬性的值不是數組時，結果顯示為undifined，如果是數組時，返回的結果是：function push() { [native code] }，所以這個判斷是為了避免form表單標籤有重複name時，他們的值都可以擷取的到。

form表單序列化為Jquery對象