如何在WordPress中使用Ajax来加载搜索结果

技术教程 2022年3月3日

1959 0 5

ajax是一个非常强大且灵活的工具，允许开发人员创建更简化的应用程序.它可以用于广泛的目的，例如加载内容或验证登录凭据.

ajax的主要好处是它是异步的，这意味着整个页面不需要重新加载，以便它接收新数据.

wordpress为ajax提供了很好的装备.它有一个很好的工作机制，可以使用它，允许您实现具有很少大惊小怪的Ajax功能.

在本文中，我将通过Ajax的基础知识，我们将创建一个非常简单的扩展，在默认二十四个主题中使用Ajax在搜索结果中提取搜索结果.

继续读取，或使用以下链接跳转:

什么是ajax?
如何使用ajax?
在WordPress
使用ajax

加载您网站的搜索结果>

什么是ajax?

ajax实际上不是一种技术，它是您可能已经知道的编程语言的混合.Ajax对于 a 同步 j avascript a nd x ml.JavaScript用于将一些数据发送到服务器，该数据符合XML格式返回的内容.

XML实际上不是必需的，常常使用JSON.当使用JSON时，我们有时将其称为AJAJ而不是Ajax.事实上，由于服务器可以返回简单的字符串或HTML，因此我们根本不需要限制XML或JSON.出于本文的目的，我将引用ajax，无论我们返回的数据类型.

ajax如何使用?

让我们来看看一个实用的例子，而不会进入代码.假设您已创建了一个房地产网站，您为访问者提供了机会，以便稍后查看列表.可以使用"保存以稍后"按钮提供此功能.

当用户单击此按钮时，它们被带到脚本，该脚本将该列表添加到稍后的列表，并且它们被重定向到他们查看的页面.这意味着页面需要再次加载.房地产网站可能非常象色，并且可能无法缓存许多图像，这将有助于更长的加载时间.

更好的解决方案是以下内容:用户单击按钮，按钮上显示了一点加载动画.然后按钮逐渐消失，在其位置显示文本"已保存的"文本.虽然这是在发生的虽然用户可以继续像往常一样使用该网站.

在引擎盖下，这两种情况下的过程非常相似.单击按钮时，用户不会在任何地方拍摄用户，但使用JavaScript我们向特定文件提出请求，提供列表ID.问题中的文件介绍了当前用户是谁以及使用所提供的清单ID将其添加到稍后的列表中.完成此操作后，脚本返回一个值，该值被传输回JavaScript函数.基于此，我们可以操纵UI以显示用户有意义的交互消息.

如果似乎有点复杂，不要担心！在实践中，这个过程很容易，它只是需要一些习惯.

在wordpress

中使用ajax

Ajax完全独立于WordPress等框架.你可以以任何你喜欢的方式实现它.但是，在WordPress中构建了Ajax工作流程的支持.如果您希望插件或主题通过集合，则应遵循此操作.

让我们在三个步骤看一个非常简单的例子.我们将从自定义解决方案中获取以在WordPress中使用Ajax基础，而无需实际使用Ajax本身以完全删除的实现.我们将创建一个一次性按钮，如果用户未单击它，则会显示该按钮，如果用户以前单击它，则会显示"已经点击".

自定义实现

在我们继续之前，我们需要弄清楚我们如何知道用户是否单击按钮.如果用户单击该按钮，我们将创建一个 clicked_link 用户元，其中值为"是".这是一个为我们检查这个的函数:

加载GIST 6377B22C49482A88DCCE170A7Caff1F2

现在我们可以创建用户界面.如果用户没有单击它，则该按钮将显示(它只能可见用户用户).如果用户单击它，将显示"已单击"的文本:

加载GIST 538B7710290997E80487A344AABFFA91

当用户单击该按钮时，该页面重新加载了 button_click 查询字符串.基于此值，我们可以使用操作来设置用户元:

加载GIST 81DEDD9F4A152FAEA433983BC9DB6B4

注意，此方法是由于多种原因推荐的 not ，但它是概念证明.此时，按钮将显示登录尚未单击它的用户.当您单击它时，您将重新定向到同一页面.嗯，在按钮加载之前，记录用户元，结果显示正确的"已经点击的"文本.

没有ajax

的ajax基础

让我们将这个例子较近Ajax实现的一步.我们已经可以利用WordPress优惠功能而无需实际编写任何JavaScript.这涉及通过 admin-ajax.php 路由我们的操作.让我们来看看我们按钮的代码如何改变:

加载GIST D134193F7EB3049BB0AD45F10C56F89E

唯一的变化是按钮的URL.它指向WordPress管理目录中的 admin-ajax.php 文件.此外，使用 button_click 的值指定了一个动作参数.由于它是WordPress核心文件，我们无法编写函数来处理我们的操作.但是，我们可以使用动作将它们绑定到这些事件.

loading gist 0bf921c1d42dee4e01b50d66c367c1fd

为了将函数绑定到 admin-ajax.php 文件中的动作，我们需要使用wp_ajax_[action]或wp_ajax_nopriv_[action]钩子.前者被解雇仅登录用户，后者仅用于注销用户.这已经是保护我们脚本的好方法！

请注意，我还重新编写 user_clicked() 功能以促进更改.我们不再需要检查用户是否已登录，因为它被 wp_ajax_button_click 钩子所处理.但是，我们确实需要将用户重新返回到上一页.

完整的ajax实现

我们的完整Ajax实现将使用我们在上一个示例中构建的基础.让我们首先编写一些JavaScript，这将在按钮上处理单击事件.

加载GIST BD7A3799CE1AF804C752DC52356C590F

我们检测按钮单击并使用 ajax() 函数向 admin-ajax.php 文件发送请求.我们确保请求类型是 post ，也给出了操作.数据对象的元素将被传输为 $_POST 数组的成员.取得成功函数已到位，如果响应是"确定"，则将更换已单击的文本的按钮.

请注意，从 admin-ajax.php 文件的角度来看，此请求与我们直接向文件发送到文件时相同.该动作被设置，因此我们的钩子从之前将以相同的方式运行.

加载GIST 641E0D0C7D254663C932A7528D513B41

这次我们不需要重定向用户，因为它们不会首先留下页面.我们确实需要回声"确定"，这将由我们的成功函数使用，我们需要 die() .这是必需的，因为 admin-ajax.php 文件否则会回显"0".

用户单击按钮，一切都是异步处理的.在发生此操作时，用户可以继续使用该网站.按钮最终将被单击的文本替换(相当迅速).如果用户重新加载页面，则不会再次看到按钮，因为它们已经单击它.

使用后退

实现ajax实现

我们的新AJAX方法很棒，但如果用户没有启用JavaScript，则会最终失败.要公平，它将起作用，但它不会将用户重定向到他们正在回声"0"然后死亡的页面上.WordPress提供 DOING_AJAX 常量，我们可以使用它来确定是否发生了Ajax请求.如果是我们回声并死亡，如果它不是我们重定向:

加载GIST 677F8FE9F05BDFD23A015FFBDEC1D13

通过使用此方法，我们可以使用相同的函数和相同的工作流程来处理javascript在启用的情况和何时没有.