javascript - 多个 AJAX 调用调用相同的成功函数不起作用

Question

我对下面显示的 AJAX 调用的行为有疑问，我不明白。

var checkBoxes = document.getElementsByName("newInclCheckBox");
for(var i = 0; i<checkBoxes.length; i++
{
  if(checkBoxes[i].checked)
  {
    var name2 = getTabKeyFromDescription(checkBoxes[i].value);
    var tablenr2 = checkBoxes[i].getAttribute("data-tablenr");
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function()
    {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
      {

        document.getElementById('newIncl_LogBox').innerHTML += xmlhttp.responseText;

      }
    }
    xmlhttp.open("GET", "../PHPScripts/getInclusions.php?q=add&name1=" + name1 + "&tablenr1=" + tablenr1 + "&name2=" + name2 + "&tablenr2=" + tablenr2, true);
    xmlhttp.send();
  }
}

如您所见，AJAX 调用位于 for 循环内，并在循环 checkBoxes 时被调用多次。

PHP-Skript getInclusions.php 成功完成每个请求，但不知何故，只有最后一个 xmlhttp.responseText 写入我的 LogBox 中。

如果我写了，我会理解这种行为

document.getElementById('newIncl_LogBox').innerHTML = xmlhttp.responseText;

(不带 += 运算符)。

为什么日志框中的内容与预期不符？非常感谢任何帮助!

Answer 1

您可以在for循环中同步调用ajax，然后它会像往常一样在您的代码中逐一执行并使用此代码。

这是同步ajax调用示例。

urllink="../PHPScripts/getInclusions.php?q=add&name1=" + name1 + "&tablenr1=" + tablenr1 + "&name2=" + name2 + "&tablenr2=" + tablenr2;

$.ajax({
    async: "false",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: urllink,
        success: function(jsonData) {
            alert("jsonData =" + jsonData);
            return jsonData;
        }
    });