form表单序列化为Jquery对象

Posted 周劭洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了form表单序列化为Jquery对象相关的知识,希望对你有一定的参考价值。


 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对象的主要内容,如果未能解决你的问题,请参考以下文章

序列化多个form表单内容同时提交

将HTML表单序列化为JavaScript对象,支持嵌套的属性和数组。

Golang 将 form-urlencoded 序列化为对象

javascript-js将form表单序列化[json字符串数组对象]

将表单序列化为没有空值的 json

如何将form内的表单序列化为json字符串