Products
GG网络技术分享 2025-03-18 16:05 13
AJAX 是一个非常强大和灵活的工具，它允许开发人员创建更精简的应用程序。 它可用于多种用途，例如加载内容或验证登录凭据。
AJAX 的主要好处是它是异步的，这意味着不需要重新加载整个页面来接收新数据。
WordPress 非常适合 AJAX。 它有一个很好的机制来使用它，让您可以轻松实现 AJAX 功能。
在本文中，我将带您了解 AJAX 的基础知识，我们将创建一个非常简单的扩展，在默认的二十四主题中使用 AJAX 拉入搜索结果。
继续阅读，或使用以下链接跳转：
AJAX 实际上不是一种技术，它是您可能已经知道的多种编程语言的混合体。 AJAX 的缩写 一种同步 Ĵ文字 一种nd X毫升。 Javascript 用于向服务器发送一些数据，服务器以 XML 格式返回一些数据。
XML 实际上不是必需的，而是经常使用 JSON。 当使用 JSON 时，我们有时将其称为 AJAJ 而不是 AJAX。 事实上，由于服务器可以返回一个简单的字符串或 HTML，我们根本不需要局限于 XML 或 JSON。 出于本文的目的，无论我们返回的数据类型如何，我都将参考 AJAX。
让我们在不深入研究代码的情况下看一个实际示例。 假设您创建了一个房地产网站，并为访问者提供了保存列表以供以后查看的机会。 可以使用“稍后保存”按钮提供此功能。
当用户单击此按钮时，他们将被带到一个脚本，该脚本将列表添加到他们以后的列表中，并且他们被重定向回他们正在查看的页面。 这意味着需要再次加载页面。 房地产网站可能非常多图像，并且可能没有缓存许多图像，这将导致加载时间更长。
更好的解决方案如下：用户单击按钮，按钮上会显示一点加载动画。 然后按钮淡出，文本“Listing Saved”显示在其位置。 在这种情况下，用户可以继续照常使用该网站。
在引擎盖下，这两种情况下的过程非常相似。 单击按钮时，用户不会被带到任何地方，但使用 Javascript 我们向特定文件发出请求，并提供列表 ID。 有问题的文件确定当前用户是谁，并使用提供的列表 ID 将其添加到他们以后的列表中。 完成此操作后，脚本将返回一个值，该值将传输回 Javascript 函数。 基于此，我们可以操纵 UI 以向用户显示有意义的交互消息。
如果这看起来有点复杂，请不要担心！ 在实践中，这个过程非常简单，只需要一些时间来适应。
AJAX 完全独立于 WordPress 等框架。 你可以以任何你喜欢的方式实现它。 但是，WordPress 中内置了对 AJAX 工作流程的支持。 如果您希望您的插件或主题通过集合，您应该遵循这一点。
让我们分三步来看一个非常简单的例子。 我们将从自定义解决方案到在 WordPress 中使用 AJAX 基础而不实际使用 AJAX 本身到一个成熟的实现。 我们将创建一个一次性按钮，如果用户还没有点击它就会显示，如果用户之前点击过它会显示“已经点击”。
在我们继续之前，我们需要弄清楚我们如何知道用户是否点击了按钮。 如果用户单击按钮，我们将创建一个 clicked_link 值为“是”的用户元数据。 这是一个为我们检查的函数：
现在我们可以创建用户界面了。 如果用户尚未单击该按钮，则会显示该按钮（仅对登录用户可见）。 如果用户点击了它，将显示文本“Already clicked”：
当用户单击按钮时，页面将重新加载 button_click 请求参数。 基于这个值，我们可以使用一个动作来设置用户元：
请注意，此方法是 不是 出于多种原因推荐，但它可以作为概念证明。 此时，该按钮将为尚未单击它的登录用户显示。 当您单击它时，您将被重定向到同一页面。 在加载按钮之前，用户元数据被记录下来，因此会显示正确的“已点击”文本。
让我们让这个示例更接近 AJAX 实现。 我们已经可以使用 WordPress 提供的功能，而无需实际编写任何 Javascript。 这包括通过 admin-ajax.php. 让我们看看我们的按钮的代码是如何变化的：
唯一的变化是按钮的 URL。 它指向 admin-ajax.php WordPress 管理目录中的文件。 此外，还指定了一个动作参数，其值为 button_click. 我们不能将处理我们操作的函数写入此文件，因为它是 WordPress 核心文件。 但是，我们可以使用动作将它们与这些事件联系起来。
为了将函数绑定到 admin-ajax.php 我们需要使用的文件 wp_ajax_[action] 要么 wp_ajax_nopriv_[action] 钩子。 前者仅对登录用户触发，后者仅对注销用户触发。 这已经是保护我们的脚本的好方法！
请注意，我还重写了 user_clicked() 功能以促进更改。 我们不再需要检查用户是否登录，因为这是由 wp_ajax_button_click 钩。 不过，我们确实需要将用户重定向回上一页。
我们完整的 AJAX 实现将使用我们在前面示例中构建的基础。 让我们从编写一些 Javascript 开始，它将处理按钮上的点击事件。
我们检测到按钮点击并使用 ajax() 发送请求的函数 admin-ajax.php 文件。 我们确保请求类型是 post 并且动作也被给出。 数据对象的元素将作为 $_POST 大批。 设置了一个成功函数，如果响应为“OK”，它将用已单击的文本替换按钮。
请注意，从 admin-ajax.php 从文件的角度来看，这个请求与我们直接将用户发送到文件时非常相似。 操作已设置，因此我们之前的钩子将以相同的方式运行。
这次我们不需要重定向用户，因为他们一开始就不会离开页面。 我们确实需要回显“OK”，这将被我们的成功函数使用，我们需要 die(). 这是必需的，因为 admin-ajax.php 否则文件将回显“0”。
一旦用户单击一个按钮，一切都会异步处理。 执行此操作时，用户可以继续使用该站点。 该按钮最终将（很快）被单击的文本替换。 如果用户重新加载页面，他们将不会再次看到该按钮，因为他们已经单击了它。
我们的新 AJAX 方法很棒，但如果用户没有启用 Javascript，最终会失败。 公平地说，它会起作用，但它不会将用户重定向回他们所在的页面，因为我们回显“0”然后死掉。 WordPress 提供 DOING_AJAX 常量，我们可以使用它来确定 AJAX 请求是否正在发生。 如果是，我们回显并死掉，如果不是，那么我们重定向：
通过使用这种方法，我们可以使用相同的功能和相同的工作流程来处理启用 Javascript 的情况和未启用的情况。
让我们修改二十四主题以在搜索页面上使用 AJAX 加载搜索结果。 第一步是创建一个子主题。 查看我们关于如何创建 WordPress 子主题的文章以获取更多信息。
接下来，让我们将用于实现 Javascript 功能的 javascript 文件排入队列。 请注意，我将确保仅在搜索页面上加载脚本。 这样做的原因是搜索页面可能具有与常规帖子列表页面不同的侧边栏。 所以当用户第一次搜索时，搜索页面实际上会加载。 一旦进入搜索页面，结果将通过 AJAX 拉入。
我用过 wp_localize_script() 功能以确保我可以访问我们的位置 admin-ajax.php 文件。 以前，这可以从我们按钮的 URL 中检索，但我们无法从此处的页面中获取它。
这 wp_localize_script() 函数可用于为您的脚本添加语言支持。 这也是将变量传递给它的好方法，这也是我在这里使用它的方式。 这将允许我们使用 myAjax.ajaxurl 在我们的 Javascript 中指向正确的 URL。
我还加入了一个 CSS 文件。 我们将使用的最小 CSS 代码可以很好地添加到子主题的样式表中。 我选择将一个专用文件加入队列只是为了划分我们的资产，这样最终可以更轻松地创建一个插件。
下一步是拦截搜索，停止搜索并将搜索查询传递给我们的自定义脚本，该脚本将返回新结果。 现在让我们为此设置 Javascript：
我用 beforeSend 事件将加载类添加到内容元素并禁用输入。 这将为用户提供一些反馈，并确保多次搜索不会导致发送多个请求。 成功后的内容 #content 元素被新结果替换。
我们将用来处理加载的 CSS 如下，它将淡化内容并产生一个很好的加载覆盖：
这就是前端的样子：
我们在 Javascript 调用中的操作是 load_search_results. 我们需要在我们将要创建的动作中使用它。 这次我们需要确保它对登录和注销的用户都运行，所以我们将同时使用两者 wp_ajax 和 wp_ajax_nopriv.
我们将创建一个自定义 WordPress 查询并使用与 search.php 在 24 中返回我们的结果：
这个函数的结果是一些 HTML，它是使用 WordPress 和 24 的原生函数创建的。 这确保我们每次都能获得正确的格式，即使没有找到帖子。
从小的 UI 改进到更大规模的性能提升，AJAX 是 WordPress 工具包的一个很好的补充。 当您第一次遇到它时，您可能需要尝试一下以绕住它，但这确实非常简单。 前端复杂的 Javascript 和服务器端的复杂 PHP 可以增加复杂性，这有时会使其变得更加困难，而不是 AJAX 本身。
如果您对 AJAX 功能感兴趣，我强烈建议您浏览 WordPress 插件库中提供的与 AJAX 相关的插件。 我还建议阅读 W3Schools AJAX 教程和 jQuery Ajax 函数的文档。
标签：Demand feedback
