javascript巧用eval函数组装表单输入项为json对象的方法
2015-11-25 15:41
866 查看
本文实例讲述了javascript巧用eval函数组装表单输入项为json对象的方法。分享给大家供大家参考,具体如下:
在ajax方式做web开发时,经常会遇到会保存前,收集表单输入项,组成json对象,然后把对象直接post到服务端的场景
常规做法是在js里写类似如下的代码:
var myObj = {}; myObj.x = document.getElementById("x").value; myObj.y = document.getElementById("y").value; //... //然后ajax post或get提交
表单元素不多的时候,这样还好,但是如果一个表单有好几十项甚至更多输入项的时候,写这种代码就太费劲了。
好在javascript中有一个邪恶的eval函数,可以帮我们完成一些类似c#反射的工作,比如下面这样:
eval('A={}'); if (A.b==undefined) { A.b = {}; } eval('A.b.c = 1'); alert(A.b.c);
这样,我们就动态创建了一个复合对象A,明白其中原理后,可以对表单做些改进:
运单号:<input type="text" name="AwbPre" value="112" style="width:40px"/>-<input type="text" name="AwbNo" value="12312311"/><br/> 结算方式: <select name="SettlementMode" style="width:100px"> <option value="CASH" selected="selected">现金</option> <option value="MONTH">月结</option> </select> <br/> 不需要赋值的属性:<input type="input" name="NotMe" value="NotMe ..." isModel="false"/> <script type="text/javascript"> function setFormModel(modelName){ eval(modelName + "={}"); var inputArr = document.getElementsByTagName("INPUT"); for(var i=0;i<inputArr.length;i++){ var isModel = inputArr[i].getAttribute("isModel"); var itemName = inputArr[i].name; var itemValue = inputArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } var selectArr = document.getElementsByTagName("SELECT"); for(var i=0;i<selectArr.length;i++){ var isModel = selectArr[i].getAttribute("isModel"); var itemName = selectArr[i].name; var itemValue = selectArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } return modelName; } setFormModel("AwbModel"); alert("单号:" + AwbModel.AwbPre + "-" + AwbModel.AwbNo + "\n结算方式:" + AwbModel.SettlementMode + "\n不该有的属性:" + AwbModel.NotMe); </script>
这样,只要form元素的name属性正确设置,需要收集表单对象时,调用一下setFormModel函数,就能快速得到一个json对象(当然这只是示例,仅处理了一级属性的情况,如果有多级属性,大家自己去扩展吧,无非就是字符串上做些文章)
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- json对象与数组以及转换成js对象的简单实现方法
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jQuery中json对象的复制方式介绍(数组及对象)
- javascript中json对象json数组json字符串互转及取值方法
- php实现数组中索引关联数据转换成json对象的方法
- jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
- angular json对象push到数组中的方法
- json对象及数组键值的深度大小写转换问题详解
- JS实现json对象数组按对象属性排序操作示例
- JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式