Question

我确信这是一个常见问题，但由于我是Ajax的新手，我无法弄清楚哪种解决方案最适合我以及如何执行此操作：

我有一个包含多个链接的页面，以及页面中间的一个div，其中显示了ajax请求的输出。到目前为止，我已经成功地将这个ajax函数用于一个链接：

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("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","history.html");
  xmlhttp.send();
}

但是，我想根据点击的链接显示不同的输出。这些是我的一些链接：

<li class="menu-item"><a href="#" onclick="loadXMLDoc()">Link 1 - History</a></li>
<li class="menu-item"><a href="#">Link 2 - Economics</a></li>
<li class="menu-item"><a href="#">Link 3 - Physics</a></li>

我希望根据点击的链接获取和显示不同的html文件，但我不知道如何执行它。

我想这是通过传递参数来完成的，但我不知道该怎么做才能让它工作。

Answer 1

在你的情况下，你可以这样做：

<li class="menu-item"><a href="#" onclick="loadXMLDoc(1)">Link 1 - History</a></li>
<li class="menu-item"><a href="#" onclick="loadXMLDoc(2)">Link 2 - Economics</a></li>
<li class="menu-item"><a href="#" onclick="loadXMLDoc(3)">Link 3 - Physics</a></li>

和

function loadXMLDoc(doc) {
    // ...
    xmlhttp.open("GET","history.php?q="+doc);
    // ...
}

并在服务器端输出不同的内容，具体取决于q参数。（或者，在JS中执行：如果为1，则打开“page1.html”;如果为2，则打开“page2.html”等。

但是，我建议你不要重新发明轮子，并使用JS库，如jQuery;它会让你的生活变得更轻松。例如，使用jQuery，您可以使用以下内容：

function loadXMLDoc(doc) {
    $.post('ajax/test.html?q=' + doc, function(data) {
        $('#myDiv').html(data);
    });
}

一开始看起来有些陌生，但它比你拥有的更方便。另一个亮点是，您可以保存onclick属性以及生成的混合HTML和JS。

// no need to use onclick
$('.menu-item').eq(0).click(function() { loadXML(1); });
$('.menu-item').eq(1).click(function() { loadXML(2); });
$('.menu-item').eq(2).click(function() { loadXML(3); });

如果您只需要在项目中执行一些操作，则可以节省几千字节并使用http://microjs.com/#中的单任务库。

基于不同链接的不同输出（Ajax）

1 个答案: