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

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

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

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

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

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

  • 什么是ajax?
  • 如何使用ajax?
  • 在WordPress
  • 中使用Ajax
  • 使用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在启用的情况和何时没有.

使用ajax

加载您网站的搜索结果

让我们修改二十四个主题以在搜索页面上使用ajax加载搜索结果.第一步是创建一个子主题.查看我们的文章有关如何创建WordPress子主题的文章,了解更多信息.

延时资产

下一个,让我们浏览javascript文件,我们将用于实现我们的JavaScript功能.请注意,我将确保脚本仅加载在搜索页面上.原因是搜索页面可能具有与常规帖子列表页面不同的侧边栏.因此,当用户首次搜索时,搜索页面实际上将加载.一旦在搜索页面上,结果将通过AJAX释放结果.

加载GIST 72B17538C87249D093308F41125A9B27

我使用了 wp_localize_script() 功能,以确保我可以访问我们 admin-ajax.php 文件的位置.以前,这可以从我们按钮的URL中检索,但我们无法从这里从页面抓取它.

wp_localize_script() 功能可用于为脚本添加语言支持.它也是将变量传递给它的好方法,这就是我在这里使用的方式.这将允许我们使用 myAjax.ajaxurl 指向我们的JavaScript中的正确URL.

我还延迟了CSS文件.将在子主题的样式表中添加最小的CSS代码非常清楚.我选择浏览专用文件只是为了将我们的资产分组,它使得在最后创建一个插件.

拦截搜索

下一步是拦截搜索,将它们的曲目中停止并将搜索查询传递给我们的自定义脚本,这将返回新的结果.让我们为此设置JavaScript:

加载GIST 3CFD2BF8E4BA905E4CFA4C1289F19D4D

我使用了 beforeSend 事件,将加载类添加到内容元素并禁用输入.这将为用户提供一些反馈,并确保多个搜索不会导致发送多个请求.成功后,将用新结果替换 #content 元素的内容.

我们将用于处理加载的CSS是以下内容,它将逐渐消退内容并产生一个很好的加载叠加层:

加载GIST 3528FC86C65FF3F2A8C42510FF48A57

,这是前端的样子所示:

Loading Posts With AJAX 使用ajax 加载帖子

服务器端

我们的JavaScript呼叫的操作是 load_search_results .我们需要在我们正在创建的操作中使用它.这次我们需要确保它为登录和注销用户运行,所以我们将使用 wp_ajax wp_ajax_nopriv .

我们将创建自定义WordPress查询,并在二十四个中使用在 search.php 中找到的完全相同的代码,以返回我们的结果:

加载GIST 11B700262B9D75146830F95BEF2467CA

此函数的结果是一些HTML,它使用原始的WordPress和二十四个的函数创建.这确保我们每次都会得到正确的格式,即使没有找到帖子.

结论

从小UI改进更大的尺度性能,Ajax是您WordPress Toolkit的一个很好的补充.当你第一次遇到它时,你可能需要尝试一下它来包围它,但它真的很简单.这是可以通过服务器端上的前端和复杂PHP上的复杂JavaScript添加的复杂性,有时会使它更加困难,而不是Ajax本身.

如果您对Ajax功能感兴趣,我强烈建议通过WordPress插件存储库中可用的Ajax相关插件浏览.我还建议阅读W3Schools Ajax教程和jQuery Ajax函数的文档.

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论