Question

我有一个Javascript文件，它从MySQL服务器检索信息。此脚本从数据库中查找三个不同的文本脚本。问题是只出现了最新的结果。我想在三个不同的DIV中使用三个文本部分。现在结果呈现3次相同：这是代码：

     ajaxRequest.onreadystatechange = function () {
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            document.getElementById("result1").innerHTML = ajaxRequest.responseText;
            document.getElementById("result2").innerHTML = ajaxRequest.responseText;
            document.getElementById("result3").innerHTML = ajaxRequest.responseText;
        }
    }
    //var nummer = document.getElementById('nummer').value;

    var queryString1 = "?nummer1=" + nummer1;
    ajaxRequest.open("GET", "ajax-comm1.php" + queryString1, true);
    ajaxRequest.send(null);

    var queryString2 = "?nummer2=" + nummer2;
    ajaxRequest.open("GET", "ajax-comm2.php" + queryString2, true);
    ajaxRequest.send(null);

    var queryString3 = "?nummer3=" + nummer3;
    ajaxRequest.open("GET", "ajax-comm3.php" + queryString3, true);
    ajaxRequest.send(null);

DIV是：

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

Answer 1

将您的调用拆分为三个不同的XmlHTTPRequest对象。您的一站式onreadystatechange将覆盖之前的所有用法，并将每个div设置为相同的值。现在是一场比赛，看看哪个AJAX请求最后完成。

function updateDiv(number, divID) {
  var queryString = '?number' + number + '=' + number;
  var div = document.getElementById(divID);
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      div.innerHTML = this.responseText;
    }
  }
  xhr.open('GET', 'ajax-comm' + number + '.php' + queryString, true);
  xhr.send();
  return xhr;
}

updateDiv(1, 'result1');
updateDiv(2, 'result2');
updateDiv(3, 'result3');

这是一个有效的JSBin。

Answer 2

使用Jquery尝试 -

   $( "#result1" ).load( "ajax-comm2.php"+ queryString1 );
   $( "#result2" ).load( "ajax-comm2.php"+ queryString2 );
   $( "#result3" ).load( "ajax-comm2.php"+ queryString3 );

Answer 3

请根据此

更改您的if条件

if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
              for(i=1;i<=3;i++){
                document.getElementById("result"+i).innerHTML = ajaxRequest.responseText;
            }
         }

如何使用Javascript将AJAX结果放入正确的DIV中

3 个答案: