JavaScript는 eval 함수를 교묘하게 사용하여 양식 입력 항목을 json 개체_javascript 기술로 조합합니다.

이 기사의 예에서는 JavaScript가 eval 함수를 교묘하게 사용하여 양식 입력 항목을 json 객체로 조합하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

Ajax를 사용하여 웹 개발을 하다 보면 양식 입력 항목을 수집하여 json 개체를 만든 후 저장한 다음 해당 개체를 서버에 직접 게시하는 시나리오를 자주 접하게 됩니다.

기존 접근 방식은 js에서 다음과 유사한 코드를 작성하는 것입니다.

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

양식 요소가 많지 않으면 괜찮지만, 양식에 수십 개 이상의 입력 항목이 있는 경우 이런 종류의 코드를 작성하는 것은 너무 힘들 것입니다.

다행히도 JavaScript에는 다음과 같은 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>

이런 식으로 양식 요소의 name 속성이 올바르게 설정되어 있으면 양식 개체를 수집해야 할 때 setFormModel 함수를 호출하여 json 개체를 빠르게 가져올 수 있습니다(물론 이는 예시일 뿐입니다. 첫 번째 수준 속성만 처리됩니다. 여러 수준 속성이 있는 경우 직접 확장할 수 있습니다. 문자열에 대해 몇 가지 기사를 작성하는 것 외에는 아무것도 없습니다.)

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.