Question

我有一个创建div的for循环。我想将外部SVG文件中的内容放入创建的每个div中。所以我正在使用AJAX请求：

for (var i=0; i<12; i++) {
  var newTile = document.createElement('div');

  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { newTile.innerHTML = xmlhttp.responseText; }
  }
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();

  document.getElementById('myDiv').appendChild(newTile);
}

似乎将内容放在最后创建的div中，而不是其他内容。我做错了什么？

Answer 1

您应该重写它以处理异步请求或将第三个参数更改为false以使其同步。

xmlhttp.open('GET','assets/svg/1001-1001.svg',false);

异步

for (var i=0; i<12; i++) {


  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var newTile = document.createElement('div');
        newTile.innerHTML = xmlhttp.responseText; 
        document.getElementById('myDiv').appendChild(newTile);
    }
  };
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();


}

Answer 2

试试这个：

    var tiles = [];
    for (var i=0; i<12; i++) {
      tile[i] = document.createElement('div');

      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState==4 && xmlhttp.status==200) { tile[i].innerHTML = xmlhttp.responseText; }
      }
      xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
      xmlhttp.send();

      document.getElementById('myDiv').appendChild(tile[i]);
}

Answer 3

我认为将所有div创建代码移动到AJAX返回函数中应该可以解决问题。

for (var i=0; i<12; i++) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var newTile = document.createElement('div');
        newTile.innerHTML = xmlhttp.responseText;
        document.getElementById('myDiv').appendChild(newTile); }
    }

    xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
    xmlhttp.send();
}

Answer 4

那是因为newTile变量过于夸张而且没有被重新声明。该变量属于for循环所在函数的范围。这在javascript中是不同的。

尝试以下

for (var i=0; i<12; i++) {
  (function (){
  var newTile = document.createElement('div');

  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { newTile.innerHTML = xmlhttp.responseText; }
  }
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();

  document.getElementById('myDiv').appendChild(newTile);
  })();
}

Answer 5

而不是：

document.getElementById('myDiv').appendChild(newTile);

尝试：

document.getElementById('myDiv').innerHTML = xmlhttp.responseText

使用AJAX用另一个文件中的内容填充div

5 个答案: