使用Ajax點擊導航時更改內容

Question

我想更改我的列表的內容取決於用戶在我的導航中「點擊」的內容。我對Ajax很陌生，不知道它是什麼。

我不希望網站「重新加載」，所以只有PHP不是靈魂在這裏。

所以，如果有人可以對我很好，並說這個工作如何，並試圖解決這個問題，我會很高興作爲一條魚！

這就是它現在看起來的樣子，我已經編輯了圖片，以便您瞭解它。

親切的問候/ A男子的問題..

Answer 1

說，我們要使用jQuery（http://api.jquery.com/）AJAX處理程序這一點。

你需要做的是創建一個PHP頁面，它將返回新的列表，你可以通過使用過濾器來處理此顯示正確的信息。然後你想將該列表推入容器。

所以使用jQuery，首先綁定一個click事件的鏈接，然後運行這樣的事情

$.get("[url]?filter=some filter", function(data){ 
    $([the div box id]).html(data) 
}); 

其他選項包括返回過濾列表爲JSON，但爲了簡單起見讓剛剛堅持返回HTML。

Answer 2

它似乎默認情況下，你已經加載到列表中的所有類別，正確的？如果是這樣，那麼使用AJAX檢索已經傳遞的內容是沒有必要的（也是不好的做法）。這是你想要做的。

在你的PHP中，你會想要附加一個獨特的類到這些項目（使用類別名稱的一些變化是最好的）。在每個項目有多個類別的情況下，爲其所屬的每個類別附加一個唯一類別。

在客戶端，使用jQuery僅顯示所需的項目。

jQuery(itemSelector).not(desiredClass).hide(); jQuery(desiredClass).show();

以上將隱藏不希望的類，以防萬一幾個你想顯示的項目被隱藏，我們調用show所需的類以及所有的飼料項目。

您可以在onClick左側的按鈕中執行此操作。