JavaScript は eval 関数を巧みに使用してフォーム入力項目を json オブジェクトに組み立てます_javascript スキル

この記事の例では、JavaScript が eval 関数を巧みに使用してフォーム入力項目を json オブジェクトに組み立てる方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

Ajax を使用して Web 開発を行う場合、保存する前にフォーム入力項目を収集して json オブジェクトを形成し、そのオブジェクトをサーバーに直接ポストするというシナリオに遭遇することがよくあります。

従来のアプローチは、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 プログラミングのすべての人に役立つことを願っています。