JavaScript utilise intelligemment la fonction eval pour assembler les éléments d'entrée du formulaire en compétences json objects_javascript

L'exemple de cet article décrit comment JavaScript utilise intelligemment la fonction eval pour assembler les éléments d'entrée de formulaire en objets json. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Lorsque vous développez des sites Web à l'aide d'Ajax, vous rencontrez souvent des scénarios dans lesquels vous collectez des éléments de saisie de formulaire pour former un objet JSON avant de l'enregistrer, puis publiez l'objet directement sur le serveur

L'approche conventionnelle consiste à écrire du code similaire au suivant en js :

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

Ce n'est pas grave lorsqu'il n'y a pas beaucoup d'éléments de formulaire, mais si un formulaire contient des dizaines, voire plus, d'éléments d'entrée, écrire ce type de code sera trop laborieux.

Heureusement, il existe une fonction d'évaluation maléfique en JavaScript, qui peut nous aider à réaliser certains travaux similaires à la réflexion C#, tels que les suivants :

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

De cette façon, on crée dynamiquement un objet composite A. Après avoir compris le principe, on peut apporter quelques améliorations au formulaire :

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

De cette façon, tant que l'attribut name de l'élément de formulaire est défini correctement, lorsque vous devez collecter des objets de formulaire, vous pouvez rapidement obtenir un objet json en appelant la fonction setFormModel (bien sûr, ce n'est qu'un exemple, seul l'attribut de premier niveau est traité, s'il y a plusieurs attributs de niveau, vous pouvez le développer vous-même, ce n'est rien de plus que de faire quelques articles sur les chaînes)

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.