A modern way of AJAX in WordPress using REST API

Encora | November 29, 2019

Estimated reading time: 6 minutes

在Google上快速搜索一下就会发现,在WordPress中调用AJAX最常用的方式仍然是使用

admin-ajax.php
admin-ajax.php. 在这篇文章中,我们将向您展示使用REST API在WordPress中使用AJAX的现代方式. This way is applicable for WordPress versions 4.7 and above. 

Pre WordPress 4.7、REST API可以在插件的帮助下使用. However, this dependency is not desirable. In later versions of WordPress, REST API Content Endpoints are now part of the WP core. 

What Is AJAX?

AJAX代表异步Javascript和XML,但现在很少有人使用XML,更多的是使用JSON. However, it is still referred to as AJAX

.An HTTP request originates when an event occurs. These events can be mouse clicks, hovers, etc. 此请求通过Internet传递到服务器,服务器对其进行处理,并将响应发送回原始浏览器. 浏览器处理它接收到的数据,并用新内容更新页面.

The old way of using AJAX

Let’s first look at the old way using

admin-ajax.php
admin-ajax.php . 这只是供参考,不应使用. 

Enqueuing and localizing script(s)

Mostly this code is present in

functions.php
functions.php file.

The above code is very common. I have enqueued the JavaScript file using the wp_enqueue_script function. Now focus on the wp_localize_script function. 这个函数接受一个关联数组,并创建一个可以在客户端任何地方使用的Javascript对象. 

In other words, 我使用了wp_localize_script函数来创建一个javascript对象,该对象在path-to-js文件中使用.js file mentioned in line 6.

For example, I can use it like

myObj.ajaxurl
myObj.ajaxurl or
myObj.nonce
myObj.nonce

In line 9 the

function admin_url(‘admin-ajax.php)
function admin_url(‘admin-ajax.php’) 动态生成' ajaxurl '并返回AJAX PHP文件的完整路径. 

In line 10 the wp_create_nonce (' my-nonce ')函数动态生成我们将用于AJAX请求的串行密钥或令牌nonce.

Using a jQuery call

Note that this is still the old way to do this. Focus on the path-to-js-file.js file that contains the code shown below. 任何操作,如单击、滚动、更改输入等. will trigger this code.

在jQuery中启动AJAX请求有不同的方式.

  1. $.ajax()   
  2. $.get()
  3. $.post()

In line number 4 and 9,

myObj.ajaxurl
myObj.ajaxurl and
myObj.nonce
myObj.nonce
is derived from line 7 in figure 1.

The data at line number 6 has three properties. Data, which we will use in the callback function. 该数据可以是选择值、输入值、整个表单等.

Second is action we would take and its reference. 最后一个是nonce,它可以是自定义名称.

一旦接收到数据,就可以按照自己的意愿自由地使用DOM. 

Now, let’s catch this request with the

wp_ajax
wp_ajax API

钩子和函数命名约定应该在

action_name
action_name format. For example,
Wp_ajax_action_name、wp_ajax_nopriv_action_name和action_name_callback
Wp_ajax_action_name、wp_ajax_nopriv_action_name和action_name_callback
function. As shown in line 8 of figure 2, 这个action属性在javascript文件中的数据对象中是强制性的和重要的.

我已经用PHP编写了钩子和回调函数来返回处理过的数据,如图3所示.
重申这是调用AJAX的旧方法,现在不推荐使用.

The new way of AJAX

现在,让我们看看使用REST API的WordPress中AJAX的现代方式.

Enqueuing and localizing script(s)

上面的图像与图1没有太大的不同,除了第7行和第8行. We use the same hook, action, and

wp_enqueue_script
wp_enqueue_script . 然而,在本例中,我们在
wp_localize_script
wp_localize_script
functions as compared to the previous one.

Here, I have used the rest_url() 函数来动态获取此特定实例的其余URL.

我们也得到了这个特定实例的nonce

wp_create_nonce( 'wp_rest' )
wp_create_nonce( 'wp_rest' )

在旧的方法中,您可以为nonce指定一个自定义名称. However, now it must be written as ‘

wp_rest
wp_rest ’. 

New Way of jQuery Call

In line 3 in the above image, our URL is different. It is now a combination of

myObj.restURL
myObj.restURL 以及我们用其他API创建和注册的端点. 查询到达此端点,而不是到达
admin-ajax.php
admin-ajax.php
.

在第5行,我们以键值格式注入报头请求.

X-WP-Nonce
X-WP-Nonce is the key and
myObj.restNonce
myObj.restNonce
is the value. 这允许我们灵活地不处理回调函数中的nonce. The rest API will now verify the nonce.

在数据部分,可以传递键值格式中包含的尽可能多的数据.

一旦接收到数据,就可以按照自己的意愿自由地使用DOM.

PHP using REST API endpoint

在上图中,从第2行到第7行,显示了添加的钩子 rest_api_init. This allows us to register our custom rest endpoint.

The register_rest_route function has three parameters baseUrl, endpoint, 数组有两个属性方法和一个回调. 回调函数包含回调函数的名称.

Here I have written the

restAPI_endpoint_callback()
restAPI_endpoint_callback() 函数,该函数处理所需的数据,也可以接受查询并返回数据.
这总结了使用REST API在WordPress中使用AJAX的现代方式.如果你喜欢读这篇文章,这里还有一些你可能会感兴趣的,

Insight Content

Categories

Share this Post

Featured Insights