javascript巧用eval函數組裝表單輸入項為json物件的方法_javascript技巧

本文實例講述了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程式設計有所幫助。