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

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

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，而不是其他的。我究竟做错了什么？

来源

2014-03-01 Coop

什么时候'xmlhttp.onreadystatechange'火？如果你尝试'var newTile = []'这样'newTile [i] = document.createElement（'div'）;'然后'newTile [i] .innerHTML ='等等。 – surfmuggle

AJAX请求将异步运行，所以它不会设置innerHTML属性，直到请求从服务器返回。这意味着for循环将在第一个值从服务器返回之前运行全部12个循环。 – daniellepelley

@daniellepelley谢谢，这是有道理的。你能提出一个解决方案的答案吗？ – Coop

您应该重写它来处理异步请求或将第三个参数更改为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(); 


}

来源

2014-03-01 22:12:50 Mathias

同步方法适用于我，但异步方法不会加载所有div中的SVG – Coop

试试这个：

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]); 
}

来源

2014-03-01 22:15:25

我认为移动所有的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(); 
}

来源

2014-03-01 22:16:01 daniellepelley

这似乎不会将svg内容加载到我的每个div中 – Coop

这是因为newTile变量是overritten而不是重新声明。该变量属于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); 
    })(); 
}

来源

2014-03-01 22:18:21 Gabe

不是：

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

尝试：

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

来源

2014-03-02 04:06:27

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

回答

相关问题