使用不同参数在mulpiple div上加载Javascript Ajax

我想运行以下ajax代码，以使用不同的值对mulpiple div执行操作

如果我将以下代码复制粘贴到我的页面中，它将只加载最后一个（或第一个）

我想运行这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>

ajaxGEOFunction（64,0）；
福

ajaxGEOFunction（65,0）；
福

ajaxGEOFunction（66,0）；
福

ajaxGEOFunction（65,0）；
福

如何做到这一点

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>

为三个

元素指定唯一的

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>

---

如果您不想给每个div一个唯一的

id

，并且希望能够添加div而不必添加到JavaScript，那么您可以给每个div一个

类

，并使用

数据-*

属性，如下所示：

<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>

foo

福

福

福
（功能（）{
函数ajaxGEOFunction（ajaxDisplay，argId，option）{
...
ajaxRequest.onreadystatechange=函数（）{
if（ajaxRequest.readyState==4）{
ajaxDisplay.innerHTML=ajaxRequest.responseText；
}
}
...
}
var ajaxDisplays=document.getElementsByClassName（'ajaxDiv'）；
对于（var i=0；i您对每个
使用相同的
id
，Javascript如何知道哪个
要加载什么？您需要使用类

<div class='ajaxDiv'>foo</div>

var queryString = "?q=" + argId ;
queryString +=  "&o=" + option;
ajaxRequest.open("GET", "ajaxGEOInjection.php" + 
                              queryString, false); //process as synchronous//
ajaxRequest.send(null);

通过使用
getElementByClassName（）
将创建一个节点列表，然后AJAX可以处理该节点列表。您可能遇到的另一个问题是AJAX是异步的。您也可以尝试使用同步请求来代替

<div class='ajaxDiv'>foo</div>

var queryString = "?q=" + argId ;
queryString +=  "&o=" + option;
ajaxRequest.open("GET", "ajaxGEOInjection.php" + 
                              queryString, false); //process as synchronous//
ajaxRequest.send(null);

看起来你这里有一个竞赛条件这个问题被标记为“jquery”，但我看不到jQuery代码，你在使用jQuery库吗？@JohnS Nope.sry，我意外添加了它谢谢你的回答。但是没有。这不是一个选项。我可以在同一页中多次运行foo，例如。如果我有以下内容，这将不起作用。：
ajaxGEOFunction（64,0）；foo
ajaxGEOFunction（65,0）foo
ajaxGEOFunction（66,0）；foo
ajaxGEOFunction（65,0）；foo
ajaxGEOFunction（64,0）；foo
多id问题仍然需要解决，它们需要是类。伙计，这很有效。我在每个id的末尾创建了一个“salt”。例如，ajaxGEOFunction（“somethingunique id”，64,0）@John-我在回答中添加了另一个选项。