0

我确信这是一个常见问题，但由于我对 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 文件，但我不知道如何执行它。

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

4

1 回答 1

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”等。

但是，我建议你不要重新发明轮子，而是使用 jQuery 之类的 JS 库；它会让你的生活更轻松。例如，使用 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/#的单任务库。

于 2012-06-16T23:24:49.690 回答