Javascript 优化递归getJSON方法

嗨，朋友们，在我的代码中，我正在使用getJSON方法自动填充文本框。当用户在一个文本框中键入代码时，特定代码的描述将显示在另一个文本框中。我在编码中使用了20多个文本框，因此getJSON方法必须被调用20次，所以我在下面输入了20次代码，是否有其他方法来优化代码

function getCodeDetails1() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode1").val()
    }, displayResult1);
}

function displayResult(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc1").val(""); // clear fields
        alert(data.error);
    } 
    else { // Found employee. Display details
        $("#txtIEdesc1").val(data.name);
    }
}

function getCodeDetails2() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode2").val()
    }, displayResult2);
}

function displayResult2(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc2").val(""); // clear fields
        alert(data.error);
    } 
    else { // Found employee. Display details
        $("#txtIEdesc2").val(data.name);
    }
}

function getCodeDetails3() {
    $.getJSON("ieCodedetails.jsp", {
        codeid: $("#txtIEcode3").val()
    }, displayResult3);
}

function displayResult3(data) {
    if (data.error) { // emp not found
        $("#txtIEdesc3").val(""); // clear fields 
        alert(data.error);
    } 
    else { // Found employee. Display details 
        $("#txtIEdesc3").val(data.name);
    }
}

---

您可以尝试将逻辑链接到某个类，而不是多个ID：

<td><input type="text" name="txtIEcode1" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc1" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode2" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc2" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode3" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc3" class="txtIEdesc" style="width:220px;" readonly></td>

---

你能解释一下我有点难以理解的代码吗？每个函数（i，el））？“每个”函数只是一个循环。它使用类txtIEcode遍历所有元素，并将它们逐个放入函数（i，el）。函数的参数是i=元素的索引，el=元素本身（），基本上-无论页面上有多少个元素-里面的逻辑。每个（函数（i，el））都将应用于每个元素。在提醒$el时，这段代码中没有什么问题，它显示了[object object]$el.on（'change'，function（）{alert（$el）$.getJSON（“ieCodedetails.jsp”，{codeid:$el.val（）}，displayResult）；这是因为$el是jQuery对象。如果希望看到输入值，则应调用alert（$el.val（））。但我建议您打开console并使用console.log（$el）而不是alert。

<td><input type="text" name="txtIEcode1" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc1" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode2" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc2" class="txtIEdesc" style="width:220px;" readonly></td>
<td><input type="text" name="txtIEcode3" class="txtIEcode" style="width:60px;"></td>
<td><input type="text" name="txtIEdesc3" class="txtIEdesc" style="width:220px;" readonly></td>

$(".txtIEcode").each(function(i, el) {
   var $el = $(el),
       $desc = $el.parent().next('td').find(".txtIEdesc");
       $el.on('change', function(){
         $.getJSON("ieCodedetails.jsp", {
              codeid: $el.val()
         }, displayResult);

         function displayResult(data) {
            if (data.error) { // emp not found
                $desc.val(""); // clear fields
                alert(data.error);
             } 
             else { // Found employee. Display details
              $desc.val(data.name);
          }
       }
   })

});