0

これはよくある質問だと思いますが、私は本当に Ajax に慣れていないので、どのソリューションが自分に最適で、これをどのように実行するかを理解できませんでした。

いくつかのリンクを含むページがあり、ページの中央に ajax リクエストの出力が表示される div があります。今では、この ajax 関数を 1 つのリンクに使用することに成功しています。

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もう 1 つのハイライトは、属性と結果として得られる 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 に答える