JavaScript nutzt geschickt die Eval-Funktion, um Formulareingabeelemente zu JSON-Objekten zusammenzustellen._javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie JavaScript die Eval-Funktion geschickt nutzt, um Formulareingabeelemente in JSON-Objekte zusammenzusetzen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Bei der Webentwicklung mit Ajax stoßen Sie häufig auf Szenarien, in denen Sie Formulareingabeelemente sammeln, um vor dem Speichern ein JSON-Objekt zu bilden, und das Objekt dann direkt auf dem Server veröffentlichen

Der herkömmliche Ansatz besteht darin, Code ähnlich dem folgenden in js zu schreiben:

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

Das ist in Ordnung, wenn es nicht viele Formularelemente gibt, aber wenn ein Formular Dutzende oder sogar mehr Eingabeelemente hat, wird das Schreiben dieser Art von Code zu mühsam sein.

Glücklicherweise gibt es in JavaScript eine böse Auswertungsfunktion, die uns dabei helfen kann, einige Arbeiten ähnlich der C#-Reflexion durchzuführen, wie zum Beispiel die folgende:

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

Auf diese Weise erstellen wir dynamisch ein zusammengesetztes Objekt A. Nachdem wir das Prinzip verstanden haben, können wir einige Verbesserungen an der Form vornehmen:

运单号：<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>

Solange das Namensattribut des Formularelements korrekt festgelegt ist, können Sie beim Sammeln von Formularobjekten schnell ein JSON-Objekt erhalten, indem Sie die Funktion setFormModel aufrufen (dies ist natürlich nur ein Beispiel). Es wird nur das Attribut der ersten Ebene verarbeitet. Wenn es ein Attribut auf mehreren Ebenen gibt, können Sie es selbst erweitern. Dies ist nichts weiter als das Verfassen einiger Artikel zu Zeichenfolgen)

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.