Estimated reading time: 6 minutes
在Google上快速搜索一下就会发现,在WordPress中调用AJAX最常用的方式仍然是使用
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
. 这只是供参考,不应使用.
Enqueuing and localizing script(s)
Mostly this code is present in
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
or
myObj.nonce
In line 9 the
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请求有不同的方式.
- $.ajax()
- $.get()
- $.post()
In line number 4 and 9,
myObj.ajaxurl
and
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
API
钩子和函数命名约定应该在
action_name
format. For example,
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_localize_script
functions as compared to the previous one.
Here, I have used the rest_url() 函数来动态获取此特定实例的其余URL.
我们也得到了这个特定实例的nonce
wp_create_nonce( 'wp_rest' )
在旧的方法中,您可以为nonce指定一个自定义名称. However, now it must be written as ‘
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
以及我们用其他API创建和注册的端点. 查询到达此端点,而不是到达
admin-ajax.php
.
在第5行,我们以键值格式注入报头请求.
X-WP-Nonce
is the key and
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()
函数,该函数处理所需的数据,也可以接受查询并返回数据.
这总结了使用REST API在WordPress中使用AJAX的现代方式.如果你喜欢读这篇文章,这里还有一些你可能会感兴趣的,