Question

我是ajax的新用户，但目前有一些代码会在点击链接后更改网站的内容区域。
问题是，我想使用不同的按钮加载不同的内容，但是当前的代码只允许我链接到一个文件/页面。

  <script>
    function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","../home/indexFav.php",true);
    xmlhttp.send();
    }
    </script>

您可以在上面的脚本中看到，当我链接到脚本时，ajax将始终指向'../ home / indexFav.php'。

我想使用不同的链接来加载不同的内容。怎么办呢？

这是我的html：

<div class="" onclick="loadXMLDoc()">Everyone</div>
<div class="" onclick="loadXMLDoc()">Favourites Only</div>

Answer 1

在loadXMLDOC函数中添加一个附加参数，该参数将加载URL。 e.g：

function loadXMLDoc(url) {
  ...
  xmlhttp.open("GET",url",true);
  xmlhttp.send();
}

然后更改您的onclick方法：

<div class="" onclick="loadXMLDoc('../home/indexFav.php')">Everyone</div>
<div class="" onclick="loadXMLDoc('../home/indexAll.php')">Favourites Only</div>

Answer 2

这就是为AJAX函数添加“参数”的方法，然后可以使用不同的值调用它。以下Javascript：

<script>
function loadXMLDoc(pageName)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("centreCont").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","../home/" + pageName + ".php",true);
xmlhttp.send();
}
</script>

然后你的html可能/会是这样的：

    <div class="" onclick="loadXMLDoc('indexEveryone')">Everyone</div>
    <div class="" onclick="loadXMLDoc('indexFav')">Favourites Only</div>

希望有所帮助。

Ajax - 使用脚本加载不同的'事件'

2 个答案: