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