基於不同鏈接的不同輸出（Ajax）

我確定這是一個常見問題，但由於我對Ajax非常陌生，所以無法確定哪種解決方案對我最合適，以及如何執行此操作：基於不同鏈接的不同輸出（Ajax）

我有一個包含多個鏈接的頁面，並且在顯示ajax請求輸出的頁面中間有一個div。現在我已經成功地使用這個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文件，但我不知道如何執行它。

我想這是通過傳遞參數完成的，但我不知道該怎麼做才能使它工作。

來源

2012-06-16 amiregelz

在你的情況，你可以這樣做：

<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/#。

來源

2012-06-16 23:24:49 egasimus

感謝您的快速回復，我將不得不學習如何使用它，並希望它能讓事情變得更輕鬆。 – amiregelz

@amiregelz - 對不起牆上的文字！ :)因爲它似乎你剛剛開始，我試圖提供大量的思想，所以你有一個很好的起點:) – egasimus

基於不同鏈接的不同輸出（Ajax）

回答

相關問題