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對象(當然這隻是樣本，僅處理了一級屬性的情況，如果有多級屬性，大家自己去擴充吧，無非就是字串上做些文章)