JavaScript bijak menggunakan fungsi eval untuk memasang item input borang ke dalam kemahiran json objects_javascript

Contoh dalam artikel ini menerangkan cara JavaScript menggunakan fungsi eval dengan bijak untuk memasang item input borang ke dalam objek json. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Apabila melakukan pembangunan web menggunakan Ajax, anda sering menghadapi senario di mana anda mengumpul item input borang untuk membentuk objek json sebelum menyimpan, dan kemudian menyiarkan objek terus ke pelayan

Pendekatan konvensional adalah untuk menulis kod yang serupa dengan yang berikut dalam js:

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

Ini tidak mengapa apabila tidak terdapat banyak elemen bentuk, tetapi jika borang mempunyai berdozen atau lebih banyak item input, menulis kod jenis ini akan menjadi terlalu sukar.

Nasib baik, terdapat fungsi eval jahat dalam JavaScript, yang boleh membantu kami menyelesaikan beberapa kerja yang serupa dengan refleksi C#, seperti berikut:

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

Dengan cara ini, kami mencipta objek komposit A ​​secara dinamik. Selepas memahami prinsipnya, kami boleh membuat beberapa penambahbaikan pada bentuk:

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

Dengan cara ini, selagi atribut nama elemen borang ditetapkan dengan betul, apabila anda perlu mengumpul objek borang, anda boleh dengan cepat mendapatkan objek json dengan memanggil fungsi setFormModel (sudah tentu ini hanya contoh, hanya atribut peringkat pertama diproses, jika terdapat atribut berbilang peringkat, anda boleh mengembangkannya sendiri, ia tidak lebih daripada melakukan beberapa artikel pada rentetan)

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.