form表单序列化为Jquery对象

Posted 2020-08-31 周劭洋

 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时，他们的值都可以获取的到。