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

Question

我能想到的最明显的例子是 Reddit 的 Upvote/downvote 按钮，当您单击按钮时，upvotes 的值会更新，upvote 按钮会亮起，并且页面不会重新加载，您只需保持原样您在页面上的位置。

我正在尝试制作与此类似的功能，并且我完全可以弄清楚如何通过重新加载来实现，但我希望它不要重新加载，以免影响用户体验。

用php可以做到这一点吗？还是我需要使用 javascript 之类的？

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

Answer 1

它叫AJAX。

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

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

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

Answer 2

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

Answer 3

你需要使用Javascript的XMLHttpRequest

Answer 4

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

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

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

Ajax 更容易与包含一些 ajax 支持代码的库（如 jQuery）一起使用，但您当然也可以用纯 javascript 实现它。

这是带有纯 javscript 的 ajax 的 one example。您可以通过 Google 找到许多其他示例。

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

Answer 5

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

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

Answer 6

您可以使用 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。