javascript巧用eval函數(shù)組裝表單輸入項(xiàng)為json對(duì)象的方法

在ajax方式做web開發(fā)時(shí)，經(jīng)常會(huì)遇到會(huì)保存前，收集表單輸入項(xiàng)，組成json對(duì)象，然后把對(duì)象直接post到服務(wù)端的場景。

常規(guī)做法是在js里寫類似如下的代碼:

var myObj = {};
myObj.x = document.getElementById("x").value;
myObj.y = document.getElementById("y").value;
//... 
//然后ajax post或get提交

表單元素不多的時(shí)候，這樣還好，但是如果一個(gè)表單有好幾十項(xiàng)甚至更多輸入項(xiàng)的時(shí)候，寫這種代碼就太費(fèi)勁了。

好在javascript中有一個(gè)邪惡的eval函數(shù)，可以幫我們完成一些類似c#反射的工作，比如下面這樣：

eval('A={}');
if (A.b==undefined)
{
 A.b = {};
}
eval('A.b.c = 1');
alert(A.b.c);

這樣，我們就動(dòng)態(tài)創(chuàng)建了一個(gè)復(fù)合對(duì)象A，明白其中原理后，可以對(duì)表單做些改進(jìn):

運(yùn)單號(hào)：

<input type="text" name="AwbPre" value="112" style="width:40px"/>-<input type="text" name="AwbNo"  value="12312311"/><br/>

結(jié)算方式：

<select name="SettlementMode" style="width:100px">
    <option value="CASH" selected="selected">現(xiàn)金</option>
    <option value="MONTH">月結(jié)</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("單號(hào)：" + AwbModel.AwbPre + "-" + AwbModel.AwbNo + "\n結(jié)算方式：" + AwbModel.SettlementMode + "\n不該有的屬性：" + AwbModel.NotMe);
 
</script>

這樣，只要form元素的name屬性正確設(shè)置，需要收集表單對(duì)象時(shí)，調(diào)用一下setFormModel函數(shù)，就能快速得到一個(gè)json對(duì)象(當(dāng)然這只是示例，僅處理了一級(jí)屬性的情況，如果有多級(jí)屬性，大家自己去擴(kuò)展吧，無非就是字符串上做些文章)

JavaScript中Eval()函數(shù)的作用

首先來個(gè)最簡單的理解
eval可以將字符串生成語句執(zhí)行，和SQL的exec()類似。
eval的使用場合是什么呢？有時(shí)候我們預(yù)先不知道要執(zhí)行什么語句，只有當(dāng)條件和參數(shù)給時(shí)才知道執(zhí)行什么語句，這時(shí)候eval就派上用場了。舉個(gè)例子：
我們要做一個(gè)function()，功能是輸入網(wǎng)頁中兩個(gè)個(gè)對(duì)象的名稱，然后程序就將這兩個(gè)對(duì)象的值聯(lián)接起來輸出。

 function output(a,b) 
    { 
      var tmpa,tmpb; 
      tmpa=document.all.a.value; 
      tmpb=document.all.b.value; 
      document.write(tmpa+tmpb); 
    } 
  output('input1','input2');

這樣你執(zhí)行的時(shí)候就會(huì)提示錯(cuò)誤“document.all.a不是對(duì)象”以及“document.all.b不是對(duì)象”。原來javascript把a(bǔ)和b當(dāng)成對(duì)象名稱了，怎樣能讓javascript把a(bǔ)里面的值作為對(duì)象名稱呢？這時(shí)候就要用eval了，把代碼改成這樣：

function output(a,b) 
  { 
    var tmpa,tmpb; 
    tmpa=eval("document.all."+a+".value"); 
    tmpb=eval("document.all."+b+".value"); 
    document.write(tmpa+tmpb); 
  } 
 output('input1','input2'); 

這樣javascript就會(huì)先取出a,b的值，然后和前面的document.all.以及后面的.value組合運(yùn)行，于是就可以順利取出input1和input2的值。

看完上面的基本理解eval是什么含義了吧
然后看下面的理解
稍微晉級(jí)一點(diǎn)點(diǎn)，用到了DOM中替換圖片的例子

在Javascript中Eval函數(shù)的使用？

【eval()函數(shù)】           

JavaScript有許多小竅門來使編程更加容易。

其中之一就是eval()函數(shù)，這個(gè)函數(shù)可以把一個(gè)字符串當(dāng)作一個(gè)JavaScript表達(dá)式一樣去執(zhí)行它。

舉個(gè)小例子：

 var the_unevaled_answer = "2 + 3";
 var the_evaled_answer = eval("2 + 3");
 alert("the un-evaled answer is " + the_unevaled_answer + " and the 
 evaled answer is " + the_evaled_answer);

如果你運(yùn)行這段eval程序, 你將會(huì)看到在JavaScript里字符串"2 + 3"實(shí)際上被執(zhí)行了。

所以當(dāng)你把the_evaled_answer的值設(shè)成 eval("2 + 3")時(shí)，JavaScript將會(huì)明白并把2和3的和返回給the_evaled_answer。 

這個(gè)看起來似乎有點(diǎn)傻，其實(shí)可以做出很有趣的事。比如使用eval你可以根據(jù)用戶的輸入直接創(chuàng)建函數(shù)。

這可以使程序根據(jù)時(shí)間或用戶輸入的不同而使程序本身發(fā)生變化，通過舉一反三，你可以獲得驚人的效果。

在實(shí)際中，eval很少被用到，但也許你見過有人使用eval來獲取難以索引的對(duì)象。

文檔對(duì)象模型（DOM)的問題之一是:有時(shí)你要獲取你要求的對(duì)象簡直就是痛苦。

例如，這里有一個(gè)函數(shù)詢問用戶要變換哪個(gè)圖象:變換哪個(gè)圖象你可以用下面這個(gè)函數(shù)：        

function swapOne()
   {
      var the_image = prompt("change parrot or cheese","");
      var the_image_object;
         if (the_image == "parrot")
            {
               the_image_object = window.document.parrot;
            } 
        else 
            {
               the_image_object = window.document.cheese;
            }
            the_image_object.src = "ant.gif";
            }
        連同這些image標(biāo)記:
     [img src="/stuff3a/parrot.gif" name="parrot"]
     [img src="/stuff3a/cheese.gif" name="cheese"]

請(qǐng)注意像這樣的幾行語句：

the_image_object = window.document.parrot;

它把一個(gè)圖象對(duì)象敷給了一個(gè)變量。雖然看起來有點(diǎn)兒奇怪，它在語法上卻毫無問題。

但當(dāng)你有100個(gè)而不是兩個(gè)圖象時(shí)怎么辦？你只好寫上一大堆的 if-then-else語句，要是能象這樣就好了：

function swapTwo()
    {
       var the_image = prompt("change parrot or cheese","");
       window.document.the_image.src = "ant.gif";
    }

不幸的是, JavaScript將會(huì)尋找名字叫 the_image而不是你所希望的"cheese"或者"parrot"的圖象，于是你得到了錯(cuò)誤信息：”沒聽說過一個(gè)名為the_image的對(duì)象”。

還好，eval能夠幫你得到你想要的對(duì)象。

function simpleSwap()
    {
        var the_image = prompt("change parrot or cheese","");
         var the_image_name = "window.document." + the_image;
        var the_image_object = eval(the_image_name);
       the_image_object.src = "ant.gif";
    }

如果用戶在提示框里填入"parrot"，在第二行里創(chuàng)建了一個(gè)字符串即window.document.parrot. 

然后包含了eval的第三行意思是： "給我對(duì)象window.document.parrot" - 也就是你要的那個(gè)圖象對(duì)象。一旦你獲取了這個(gè)圖象對(duì)象，你可以把它的src屬性設(shè)為ant.gif. 有點(diǎn)害怕？用不著。其實(shí)這相當(dāng)有用，人們也經(jīng)常使用它。

我們常常在Javascript中間到Eval這個(gè)函數(shù)，有些人覺得這個(gè)函數(shù)很奇怪，可以把一些字符串變的功能很強(qiáng)大。
在我們需要將普通的字符串轉(zhuǎn)變成具體的對(duì)象的時(shí)候，就會(huì)用到這個(gè)函數(shù)eval 函數(shù)對(duì)作為數(shù)字表達(dá)式的一個(gè)字符串進(jìn)行求值，其語法為：

eval(expr)

此處 expr 是一個(gè)被求值的字符串參數(shù)。如果該字符串是一個(gè)表達(dá)式，eval 求該表達(dá)式的值；如果該參數(shù)代表一個(gè)或多個(gè) JavaScript 語句，那么 eval 執(zhí)行這些語句。eval 函數(shù)可以用來把一個(gè)日期從一種格式（總是字符串）轉(zhuǎn)換為數(shù)值表達(dá)式或數(shù)字。         

==============================

Eval 函數(shù)

功能：先解釋Javascript代碼，然后在執(zhí)行它

用法：Eval(codeString)

codeString是包含有Javascript語句的字符串，在eval之后使用Javascript引擎編譯。

注釋：

例子：eval(id + "_icon.src="/imgs/collapse_up.gif'");

id是之前設(shè)定的參數(shù)，而在雙引號(hào)中的字符串則是需要編譯的

引用:

--------------------------------------------------------------------------------

function tophide(id)     //id indicates menu
{
     if (top.topframeset.rows == "31,*")
     {
         top.topframeset.rows = "86,*";
         eval(id + "_icon.src="/imgs/collapse_up.gif'");
         eval(id + "_icon.alt='Collapse The Head'");
         head.style.display = "block"
         }
     else
     {
         top.topframeset.rows = "31,*";
         eval(id + "_icon.src="/imgs/collapse_down.gif'");
         eval(id + "_icon.alt='Expand The Head'");
         head.style.display = "none"
     }
}

如果還是不明白深入認(rèn)識(shí)javascript中的eval函數(shù)

發(fā)現(xiàn)為本文起一個(gè)合適的標(biāo)題還不是那么容易，呵呵，所以在此先說明下本文的兩個(gè)目的：
（1）介紹javascript中的eval函數(shù)的用法
（2）如何在函數(shù)內(nèi)執(zhí)行全局代碼

先來說eval的用法，內(nèi)容比較簡單，熟悉的可以跳過。

eval的用法
eval函數(shù)接收一個(gè)參數(shù)s，如果s不是字符串，則直接返回s。否則執(zhí)行s語句。如果s語句執(zhí)行結(jié)果是一個(gè)值，則返回此值，否則返回undefined。
需要特別注意的是對(duì)象聲明語法“{}”并不能返回一個(gè)值，需要用括號(hào)括起來才會(huì)返回值，簡單示例如下：

var code1='"a" + 2';    //表達(dá)式
var code2='{a:2}';      //語句
alert(eval(code1));     //->'a2'
alert(eval(code2));     //->undefined
alert(eval('(' + code2 + ')'));    //->[object Object]

可以看到，對(duì)于對(duì)象聲明語句來說，僅僅是執(zhí)行，并不能返回值。為了返回常用的“{}”這樣的對(duì)象聲明語句，必須用括號(hào)括住，以將其轉(zhuǎn)換為表達(dá)式，才能返回其值。這也是使用JSON來進(jìn)行Ajax開發(fā)的基本原理之一。在例子中可以清楚的看到，第二個(gè)alert語句輸出的是undefined，而第三個(gè)加了括號(hào)后輸出的是語句表示的對(duì)象。
►現(xiàn)在來說本文的重點(diǎn)，如何在函數(shù)內(nèi)執(zhí)行全局代碼。為了說明這個(gè)問題，先看一個(gè)例子：

var s='global';    //定義一個(gè)全局變量
function demo1(){
    eval('var s="local"');
}
demo1();
alert(s);    //->global

很好理解，上面的demo1函數(shù)等價(jià)于：function demo1(){var s='local';}，其中定義了一個(gè)局部變量s。
所以最后的輸出是global并不是什么奇怪的事情，畢竟大家都能很清楚的區(qū)分局部變量和全局變量。
仔細(xì)體會(huì)一下，可以發(fā)現(xiàn)eval函數(shù)的特點(diǎn)，它總是在調(diào)用它的上下文變量空間（也稱為：包，closure）內(nèi)執(zhí)行，無論是變量定義還是函數(shù)定義都是如此，所以如下的代碼會(huì)產(chǎn)生函數(shù)未定義的錯(cuò)誤：

var s='function test(){return 1;}';     //一個(gè)函數(shù)定義語句
function demo2(){
    eval(s);
}
demo2();
alert(test());    //->error:test is not defined

這是因?yàn)閠est函數(shù)在局部空間定義，demo2函數(shù)內(nèi)可以訪問到，外面就訪問不到了。

而在實(shí)際的Ajax開發(fā)中，有時(shí)我們需要從服務(wù)器動(dòng)態(tài)獲取代碼來執(zhí)行，以減輕一次載入代碼過多的問題，或者是一些代碼是通過Javascript自身生成的，希望用eval函數(shù)來使其執(zhí)行。

但這樣的動(dòng)態(tài)獲取代碼的工作一般在函數(shù)內(nèi)完成，比如：

function loadCode(){
    var code=getCode();
    eval(code);
}

可見eval不可能在全局空間內(nèi)執(zhí)行，這就給開發(fā)帶來了不少問題，也看到過很多人為此郁悶。
不過現(xiàn)在偶終于找到了解決辦法，嘿嘿，可以同時(shí)兼容IE和Firefox，方法如下：

var X2={}    //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
  //ie
  execScript(code);
}else{
  //not ie
  window.eval(code);
}
}

現(xiàn)在如果要想在函數(shù)內(nèi)定義全局代碼，就可以通過調(diào)用X2.Eval(code)方法，一個(gè)例子如下：

var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'

可見，在demo3函數(shù)內(nèi)重新定義了全局變量s="local"。
需要注意的是X2.Eval并不返回值，如果要進(jìn)行表達(dá)式的求值，還是用系統(tǒng)的eval函數(shù)。X2.Eval設(shè)計(jì)為僅做全局代碼定義用。
其實(shí)看到這里，或許有人感覺問題也太容易解決了點(diǎn)，呵呵，但發(fā)現(xiàn)這個(gè)辦法倒是需要些運(yùn)氣和技巧的：
（1）對(duì)于IE瀏覽器，默認(rèn)已經(jīng)提供了這樣的函數(shù)：execScript，用于在全局空間執(zhí)行代碼，只是知道的人還不多。
（2）對(duì)于Firefox瀏覽器，直接調(diào)用eval函數(shù)，則在調(diào)用者的空間執(zhí)行；如果調(diào)用window.eval則在全局空間執(zhí)行。這個(gè)知道的人估計(jì)就更少了。畢竟alert(eval==window.eval)返回true！

Firefox的eval函數(shù)的特點(diǎn)的確是很令人奇怪的，但從javascript規(guī)范中倒也能找到其來源：

If value of the eval property is used in any way other than a direct 
call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a 
CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.

意思大概就是說eval函數(shù)的執(zhí)行是和調(diào)用者相關(guān)的，但并沒有說其執(zhí)行上下文的問題。所以IE和Firefox孰是孰非也就很難說了，大家知道解決辦法就好。