Question

我能想到的最明显的例子是Reddit Upvote / downvote按钮，当你点击按钮，upvotes的值更新，upvote按钮亮起，页面没有重新加载，你只是保持准确你在页面上的位置。

我正在尝试制作与此类似的功能，我可以完全弄清楚如何重新加载，但我希望它不会重新加载，因此用户体验不会中断。

有可能用PHP做到这一点吗？或者我需要使用javascript或其他东西吗？

我需要它执行的操作将是数据库中的基本更新查询。

Answer 1

它被称为AJAX。

使用AJAX，您可以在后台发送请求最简单的方法是使用jquery库。

如果您想根据该查询的结果采取其他一些操作，您还可以将一些数据作为JSON输出回脚本。

一个好的教程是this one 它还解释了这个请求（称为：XMLHttpRequest）是如何工作的。

Answer 2

如果您要做的是联系服务器以向其发送某个状态或从服务器（或两者）检索某些状态，那么您将使用带有javascript的AJAX以便在不重新加载页面的情况下联系服务器。然后，您还可以使用javascript在操作后更新页面状态。这通常是你所引用的Reddit页面所做的。

从概念上讲，您可以像这样设置页面：

将链接放在页面上。
使用javascript安装事件处理程序，以便您收到链接点击的通知。
单击链接时，将调用您的事件处理程序。
防止链接的默认行为，因此浏览器无法导航到新页面。
然后，在事件处理程序中，使用AJAX将数据发送到服务器。您显然需要服务器和服务器进程上的URL，它可以为您接受和处理数据，并在需要时返回值。
如果你需要来自服务器的响应，那么为AJAX调用完成时设置一个回调函数（这将是将来某些不确定的时间）。
然后，如果您需要以任何方式更改当前页面（比如再显示一个upvote），那么您可以使用javascript修改当前页面以显示新状态。

Ajax更容易使用包含一些ajax支持代码的库（如jQuery），但你当然可以在普通的javascript中实现它。

这是使用普通javscript的ajax的one example。您可以在Google上找到许多其他示例。

这个关于AJAX的MDN tutorial似乎也非常有用，可以向您展示它是如何工作的。

Answer 3

这可以通过对php脚本的Ajax调用来完成。 Ajax专为这些异步更新和/或重新加载而设计。

另一种方法是使用HTML5 WebSockets。当用户单击upvote时，您可以让客户端向服务器发送触发器，然后服务器可以更新并推回数据。但是，这会有点溢出。

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
}

Here是个小提琴。

注意：我看到你要更新数据库。在这种情况下，您必须在onVoteClick函数中使用AJAX（或使用XMLHttpRequest）。 JavaScript是一种客户端编程语言，如果不使用AJAX或XMLHttpRequest，将无法与服务器通信。使用jQuery库，您应该能够write AJAX非常简单。

Answer 5

您需要使用Javascript XMLHttpRequest

Answer 6

您可以使用AJAX ...
它允许您使用JavaScript（客户端）来调用服务器端功能。 Here是一个很好的例子。

如何在不重新加载页面的情况下使链接执行操作？

6 个答案: