[英]Javascript Ajax load on mulpiple div with different arguments
I want to run the following ajax code to mulpiple divs with different values. 我想运行以下ajax代码以使多个div具有不同的值。
If I copy-paste the following code into my page, it loads only the last (or the first) 如果我将以下代码复制粘贴到我的页面中,它将仅加载最后一个(或第一个)
I want to run these 3 javascript calls and see 3 different result though Ajax. 我想运行这3个javascript调用,并通过Ajax看到3个不同的结果。
<script type="text/javascript">ajaxGEOFunction(64,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(65,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(66,0);</script>
<div id='ajaxDiv'>foo</div>
<hr><hr>
<script type="text/javascript">ajaxGEOFunction(65,0);</script>
<div id='ajaxDiv'>foo</div>
How this can be done? 如何做到这一点?
Abobe code: Abobe代码:
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxGEOFunction(argId,option){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){the 3 divs
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var queryString = "?q=" + argId ;
queryString += "&o=" + option;
ajaxRequest.open("GET", "ajaxGEOInjection.php" +
queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
Give the three <div>
elements unique id
values. 赋予三个
<div>
元素唯一的id
值。
<div id='ajaxDiv1'>foo</div>
<hr><hr>
<div id='ajaxDiv2'>foo</div>
<hr><hr>
<div id='ajaxDiv3'>foo</div>
<script type="text/javascript">
ajaxGEOFunction('ajaxDiv1',64,0);
ajaxGEOFunction('ajaxDiv2',65,0);
ajaxGEOFunction('ajaxDiv3',66,0);
</script>
Add a parameter to the function so you can pass the element id
. 向函数添加参数,以便您可以传递元素
id
。
function ajaxGEOFunction(elementId,argId,option){
...
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById(elementId);
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
...
}
If you don't want to give each div a unique id
, and you want to be able to add divs without having to add to the JavaScript, you could give each div a class
and use data-*
attributes like this: 如果您不想给每个div唯一的
id
,并且希望能够添加div而不必添加到JavaScript,则可以给每个div一个class
并使用data-*
属性,如下所示:
<div class="ajaxDiv" data-argId="64" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="65" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="66" data-option="0">foo</div>
<hr><hr>
<div class="ajaxDiv" data-argId="65" data-option="0">foo</div>
<script>
(function() {
function ajaxGEOFunction(ajaxDisplay,argId,option){
...
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
...
}
var ajaxDisplays = document.getElementsByClassName('ajaxDiv');
for (var i=0; i<ajaxDisplays.length; i++) {
ajaxGEOFunction(ajaxDisplays[i],
ajaxDisplays[i].getAttribute('data-argId'),
ajaxDisplays[i].getAttribute('data-option'));
}
})();
</script>
You are using the same id
for each <div>
, how is Javascript supposed to know which <div>
to load what? 您为每个
<div>
使用相同的id
,Javascript应该如何知道哪个<div>
加载什么? You need to use classes instead. 您需要改用类。
<div class='ajaxDiv'>foo</div>
Then, in your JS use... 然后,在您的JS中使用...
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementByClassName('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
By using getElementByClassName()
a NodeList will be created which AJAX can then process. 通过使用
getElementByClassName()
将创建一个NodeList,AJAX随后可以对其进行处理。 Another issue you could be running into, is that AJAX is asynchronous. 您可能会遇到的另一个问题是AJAX是异步的。 You may also try experimenting with using synchronous requests instead.
您也可以尝试尝试使用同步请求。
var queryString = "?q=" + argId ;
queryString += "&o=" + option;
ajaxRequest.open("GET", "ajaxGEOInjection.php" +
queryString, false); //process as synchronous//
ajaxRequest.send(null);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.