如何使鏈接執行操作而不重新加載頁面？

Question

我能想到的最清楚的例子是Reddit Upvote / downvote按鈕，當您單擊按鈕時，upvotes的值被更新，upvote按鈕點亮，並且頁面不會重新加載，您只停留在原位置在頁面上。

我正在嘗試制作與此類似的功能，並且我可以完全弄清楚如何通過重新加載來實現它，但是我希望它不重新加載，以免影響用戶體驗。

有可能用php做到這一點嗎？ 還是我需要使用JavaScript或其他內容？

我需要它執行的操作將是數據庫中的基本更新查詢。

Answer 1

稱為AJAX 。

使用AJAX，您可以在后台發送請求。
最簡單的方法是為此使用jquery庫。

如果要根據該查詢的結果執行其他操作，還可以將一些數據作為JSON輸出回腳本。

一個好的教程是這一個 。
它還說明了此請求（稱為：XMLHttpRequest）如何工作。

Answer 2

如果您要聯系服務器以發送狀態或從服務器檢索狀態（或兩者），則可以將AJAX與javascript一起使用，以便在不重新加載頁面的情況下聯系服務器。 然后，您還可以在操作后使用javascript更新頁面狀態。 通常，這就是您引用的Reddit頁面正在執行的操作。

從概念上講，您將這樣設置頁面：

1. 將鏈接放在頁面上。
2. 使用javascript安裝事件處理程序，以便單擊鏈接時收到通知。
3. 單擊鏈接后，將調用您的事件處理程序。
4. 阻止鏈接的默認行為，以使瀏覽器不會導航到新頁面。
5. 然后，在事件處理程序中，使用AJAX將數據發送到服務器。 很顯然，您將在服務器和服務器進程上需要一個URL，該URL可以為您接受和處理數據並在需要時返回值。
6. 如果您需要服務器的響應，請在AJAX調用完成時設置一個回調函數（這將是將來的不確定時間）。
7. 然后，如果您需要以任何方式更改當前頁面（例如顯示更多更新），則可以使用javascript修改當前頁面以顯示該新狀態。

Ajax更易於與包含一些ajax支持代碼的庫（如jQuery）一起使用，但是您當然也可以使用純JavaScript來實現。

這是帶有純javscript的ajax的示例 。 您可以在Google上找到許多其他示例。

這份有關AJAX的MDN教程似乎也非常有用，可以向您展示其工作原理。

Answer 3

這將通過對您的php腳本進行Ajax調用來完成。 Ajax專為這些異步更新和/或重新加載而設計。

您可以執行此操作的另一種方法是使用HTML5 WebSockets。 您可以讓用戶單擊用戶投票時，客戶端將觸發器發送到服務器，然后服務器可以更新並推回數據。 但是，這可能會有點過剩。

Answer 4

您可以使用JavaScript來做到這一點。 這是一個簡單的示例：

<a href="#" id="upvoteBtn">Vote Up</a>

JavaScript中的簡單解決方案：

var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);

function onVoteClick(e) {
    e.preventDefault();
    // do something
}

這里是一個小提琴。

注意：我看到您將要更新數據庫。 在這種情況下，您將必須在onVoteClick函數中使用AJAX（或使用XMLHttpRequest）。 JavaScript是一種客戶端編程語言，如果不使用AJAX或XMLHttpRequest，將無法與服務器通信。 使用jQuery庫，您應該能夠輕松編寫AJAX 。

Answer 5

您需要使用Javascript的XMLHttpRequest

Answer 6

您可以使用AJAX ...
它允許您使用JavaScript（客戶端）調用服務器端函數。 這是一個很好的例子。