form表单序列化为Jquery对象
2017-02-15 18:03
204 查看
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表单序列化转换为json对象功能示例
- jQuery实现form表单元素序列化为json对象的方法
- form表单序列化转json(后台接收json转object)
- serializeObject——序列化Form表单到一个对象
- 将复杂form表单序列化serialize-object.js
- JS 获取Form表单信息序列化
- 将form表单中的值序列化成对象
- 解决form表单序列化获取不到未选中的checkbox,radio的值
- jquery序列化form表单对象教程网址
- jQuery-serialize()输出序列化form表单值的方法
- jquery form表单序列化成json格式
- jquery easyui将form表单元素的值序列化成对象
- jQuery扩展 form表单数据json序列化
- form表单的序列化及serialize()函数的使用
- 关于jquery form表单序列化的注意事项详解
- form表单序列化详解(推荐)
- jQuery serializeObject 序列化form表单Json对象 jQuery.extend()合并对象
- 异步上传文件使用new FormData($(‘#uploadForm‘)[0])序列化表单
- jquery序列化form表单使用ajax提交后处理返回的json数据