首页 视频课程 主题开发课程第01章、开发准备 WordPress中AJAX接口注册方法

WordPress中AJAX接口注册方法

2022-12-13 / 384阅

AJAX是目前广泛使用的数据异步传输模式,网页、APP、小程序中广泛使用。WordPress的AJAX异步传输也是一样的分为两个部分,一是前端的请示和数据使用,二是后台的请示接受、数据准备、数据返回。先说下WordPress主题中的前端请示。

前端AJAX请示数据

WordPress中集成了JQuery组件,可以直接使用。但是为了防止冲突,默认是noConflict()模式,$不能直接使用,当在使用之前需要先处理$符号。如下:

jQuery(document).ready(function($) {
   //这里面才能使用$
} 

当然除了上面的方式,还有许多可行的,可以根据你的喜好使用,如果你不知道其它方法,暂时就用这个就行,学多了你也累。

先来演示一个基础的AJAX请求:

var ajax_url ="<?php echo admin_url( 'admin-ajax.php');?>"; //这一句需要写在PHP文件中
       jQuery(document).ready(function ($) {
              console.log('悠然自学,乐在其中');
              $.ajax({
                     type: "POST",
                     url: ajax_url, //地址
                     data: {
                            action: "usewp_ajax",
                            data:'悠然自学'
                     },
                     success: function (back) {
                            console.log(back);
                     }
              });
       }); 

上面代码中有几个必要的参数 ,第一个是url,这个是请示的地址,一般情况我们直接使用WordPress默认的地址/wp-admin/admin-ajax.php。也就是上面第一行的函数输出的地址,特殊需求的可以自定义。本文以默认地址讲解,职使用自定义地址,下面的内容可以忽略。

使用默认地址,全部AJAX请求都集中到了同一个地址,这个时候需要action参数来区别请求。所以的data数据中必须定义一个唯一的标志,这个标志和后台注册 AJAX 事件时一样,系统通过这个标志来确定应该用那个函数来处理这次请求。

其它需要的提交的数据根据业务需要确定,在WordPress安全相关章节会涉及到一个随机数,本节不做舆论。

后台注册AJAX事件来处理数据

上面我们介绍下前端提交AJAX请求,现在来看下后台如何接受这次请求。首先需要注册AJAX事件来处理。代码如下:

add_action('wp_ajax_youran_api', 'youran_api_function');//登录了
add_action('wp_ajax_nopriv_youran_api','youran_api_function_nologin');//未登录
function youran_api_youran_api_function(){
      //do anything
     exit;
} 
function youran_api_youran_api_function_nologin(){
      //do anything
     wp_die();
}  

上面的代码中,加粗的 youran_api 就是AJAX标志,要和前端的一样。事件分为两种情况,第一种是用户已经登录的,会自动进入 youran_api_function 函数。如果用户没有登录则进入youran_api_youran_api_function_nologin 函数,业务逻辑中可以按需求处理。

函数最后一个exit;和wp_die();都是用于结束函数,建议用wp_die();,如果不结束,WordPress会多输了一个数字0。

输出内容

为了方便前端处理,返回的内容建议采用JSON格式,返回文本,后期处理有点麻烦。可以使用下面的函数处理:

wp_send_json( mixed $response, int $status_code = null, int $options ) 
  • $response 是需要返回的对象或者数组
  • $status_code 返回的状态码
  • $options 传递级json_encode的参数

wp_send_json后面不需要 exit 或者 wp_die ,它会自动调用wp_die()

你说你不喜欢这个用其它的也可以,比如:

header('Content-Type:application/json');
echo json_encode($back, JSON_UNESCAPED_UNICODE);
exit; 

方法千千万万,用你自己喜欢的就行。

阅读文章或者观看视频过程中有任何问题,请下方留言或者联系我Q248758228

大家谈论
    我的见解
    目录