WordPress实现Ajax | WordPress折腾记

  • 2018-11-23
  • 552
  • 0

最近又想换WP的主题, 各大主题站找来找去始终找不到满意的.

于是想着自己折腾一个主题.

本文整理一下在主题开发过程中, 是怎样实现Ajax的.

### 正文

WordPress中自定义ajax 涉及到了两个hook:
wp_ajax_(your_action_name)
wp_ajax_nopriv_(your_action_name)

它们分别作用于登录用户和未登录用户

一. 对于登录用户的ajax请求 wp_ajax_(your_action_name)

处理ajax请求的php代码

function handler_request(){
    echo 'ojbk';
}
add_action('wp_ajax_test_ajax' , 'handler_request');

这时我们的ajax代码应该这样写

//以jQuery ajax为例
$.ajax({
    url: ajaxurl, // *
    dataType: 'json',
    type:'post',
    data:{
        "action": "test_ajax" //这个action是必须的, 且就是我们上面 wp_ajax_test_ajax 中的test_ajax
        "test":"ojbk"
    },
    success:function(response){
        console.log(response);
    },
    error:function(err){
        console.log(err);
    }
});

这里有个地方需要提一下
自从WordPress 2.8开始, 后台界面自动提供了一个js全局变量 ajaxurl, 值为[http://你的博客地址/wp-admin/admin-ajax.php], js代码中可以直接引用此全局变量作为ajax的请求路径.

二. 对于非登录用户的ajax请求 wp_ajax_nopriv_(your_action_name)

由于前台界面没有可直接调用ajax请求路径,
所以我们通过该WordPress的一个API — wp_localize_script(), 从名字上就能看出他的意思–本地化脚本, 通过这个API我们可以实现把路径变量通过php传递给前端js. 例如:

function add_static()
{
    wp_enqueue_script('ajax-request', get_template_directory_uri() . '/static/js/upload.js?v=' . rand());

    wp_localize_script('ajax-request', 'MyAjax', array('ajaxUrl' => admin_url('admin-ajax.php'),
    ));
}
add_action('admin_init', 'add_static');

转化成html标签就是


<script type="text/javascript" src="http://你的博客地址/wp-content/themes/你的主题名字/static/js/upload.js?v=一个随机数"></script> <script type="text/javascript"> /* <![CDATA[ */ var MyAjax = { ajaxUrl: "http://你的博客地址/wp-admin/admin-ajax.php" }; /* ]]> */ </script>

有一点需要特别注意:
这个MyAjax变量只能在对应js的代码访问, 这里也就是 upload.js

此时处理ajax请求的php代码应该这样写

function handler_request(){
    echo 'ojbk';
}
add_action('wp_ajax_nopriv_test_ajax' , 'handler_request');

而ajax代码则是:

//以jQuery ajax为例
$.ajax({
    url: MyAjax.url, // *
    dataType: 'json',
    type:'post',
    data:{
        "action": "test_ajax" //这里action也是必须的, 且就是我们上面 wp_ajax_nopriv_test_ajax 中的test_ajax
        "test":"ojbk"
    },
    success:function(response){
        console.log(response);
    },
    error:function(err){
        console.log(err);
    }
});

到此为止, 我们就已经实现WordPress中自定义ajax.

但是, 说到ajax, 肯定就与数据有关

那么就涉及到数据安全

在这里我们可以使用 nonce 来实现权限控制

Nonces是一组生成的数字并且只能被使用一次, Nonces可以用来确保Ajax请求来源的可靠性.

当然啦, 也不是所有情况都需要使用nonces, 如果ajax是用来操作某些数据, 那么你可以使用nonce;

如果ajax只是读取一些数据, 那么你不一定需要使用nonce

Nonce 的使用

使用nonce需要调用wp的wp_create_nonce($action)

我们可以修改一下前面本地化脚本时的代码

function add_static()
{
    wp_enqueue_script('ajax-request', get_template_directory_uri() . '/static/js/upload.js?v=' . rand());

    wp_localize_script('ajax-request', 'MyAjax', array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        //生成一个id为"my-ajax-nonce"的 nonce
        'ajaxNonce' => wp_create_nonces('my-ajax-nonce')
    ));
}
add_action('admin_init', 'add_static');

这样子, 我们就可以在ajax中将nonce 发送到后端进行验证

而后端php则可以使用wp_verify_nonce($nonce, $action); 进行验证

wp_verify_nonce($nonce, $action);

$nonce

(字符串) (必需) 用来验证的随机数

默认值:None

$action

(字符串) (必需) 解释当前操作,生成随机数后也应进行同样解释。

默认值:-1

返回的值
* 无论随机数是否通过验证,都返回布尔变量

示例:
ajax代码:

$.ajax({
    url: MyAjax.url, // *
    dataType: 'json',
    type:'post',
    data:{
        "action": "test_ajax", //这里action也是必须的, 且就是我们上面 wp_ajax_nopriv_test_ajax 中的test_ajax
        "nonce": MyAjax.ajaxNonce,
        "test":"ojbk"
    },
    success:function(response){
        console.log(response);
    },
    error:function(err){
        console.log(err);
    }
});

后端php验证:

function handler_request(){
    if(!wp_verify_nonce($_POST['nonce'] , 'my-ajax-nonce'))
        wp_die();

    echo 'ojbk';
}
add_action('wp_ajax_nopriv_test_ajax' , 'handler_request');

撒花, 谢幕!


文章作者: 燕归来
原始链接: https://www.yguilai.com/?p=472
除非特殊说明, 本站所有文章采用 “署名-非商用-相同方式共享 4.0” 协议
转载请注明原文链接及作者


评论

还没有任何评论,你来说两句吧