提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

WordPress二次开发之调用ajax

WordPressAJAX 调用 二次开发
2023-06-13 09:12:32 时间

以字体样式插件为例，当用户输入字体颜色值时异步判断值类型是否合法

引入JS

通过wp_enqueue_script方法引入

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle：（必需）脚本名称。小写字符串。默认值：None

$src：（可选）WordPress网站根目录下的JS路径。如：”/wp-includes/js/xxx.js”。默认值：None

$deps：（可选）依赖关系数组；加载该脚本前需要加载的其它脚本。默认值：array()

$ver：（可选）指明脚本版本号的字符串（若存在版本号）。默认为false。

$in_footer：（可选）默认值：false，放置在区块中。为true时，会出现在区最下方，但必须有wp_footer()钩子。

class my_change_font_style{
    var $option_group = 'general'; //注册选项 设置显示在哪个页面

    public function __construct()
    {
        add_action('admin_init',array($this,'register_my_test_setting'));
        add_action('wp_head',array($this,'my_test_head_fun'));

        //引入js
        wp_enqueue_script('my_test',plugins_url('js/my_test.js',__FILE__),array('jquery'));
        //注册ajax处理页面 第一个参数必须相同
        wp_localize_script('my_test','ajax_object',array('ajax_url'=>admin_url('admin-ajax.php')));
    }
        ...

编写自定义js 在wp-content\plugins\js 新键文件 my_test.js

jQuery(document).ready(function($){
    $("input[name='my_test_option[color]']").blur(function(){
        $.ajax({
            type:'post',
            url:ajax_object.ajax_url, //使用本地化函数定义的类
            data:{
                color:$(this).val(),
                action:'my_color_check'
            },beforeSend:function(){
                console.log('校验中')
                $('#err_color').html('校验中...')

            },
            success:function(data){
                if(data == 'ok'){
                    console.log('输入正确')
                    $('#err_color').html('输入正确')
                }else{
                    console.log('请输入正确的颜色')
                    $('#err_color').html('请输入正确的颜色')
                }
            }
        })
    })
})

上面js实现了当颜色输入框离开焦点时，对输入的值进行判断 ajaxs使用的url 为 wp_localize_script函数产生的对象 需要注意的是，这里必须使用jQuery.document.ready(function())的方式不能使用 $(function(){})这种方式经测不能引入jquery

处理ajax请求

这里我们不能之间在admin-ajax.php中对ajax进行处理，这样做就是修改了核心文件

观察 admin-ajax.php

发现其挂载了两个钩子wp_ajax_...和wp_ajax_nopriv_...

我们在初始化的时候将函数添加到这两个钩子上即可在插件中对ajax请求进行处理 在构造函数中

public function __construct()
    {
        add_action('admin_init',array($this,'register_my_test_setting'));
        add_action('wp_head',array($this,'my_test_head_fun'));

        //引入js
        wp_enqueue_script('my_test',plugins_url('js/my_test.js',__FILE__),array('jquery'));
        //注册ajax处理页面 第一个参数必须相同
        wp_localize_script('my_test','ajax_object',array('ajax_url'=>admin_url('admin-ajax.php')));
        //处理ajax 钩子
        add_action('wp_ajax_my_color_check', array($this,'color_check_fun'));
    }
    public function color_check_fun(){
        if(trim($_POST['color']) != ""){
            echo 'ok';
        }
        //ajax 处理结束
        wp_die();
    }

测试的结果

在前台也可以使用ajax

示例 标题被点击时输出后台的返回值

//my_test.js
...
 $('.entry-title').click(function(){
        $.ajax({
            type:'post',
            url:ajax_object.ajax_url, //使用本地化函数定义的类
            data:{
                action:'my_test'
            },
            success:function(data){
                if(data!=0){
                    console.log(data)
                }
            }
        })
    })
})
//test_install.php
...
public function __construct()
    {
        add_action('admin_init',array($this,'register_my_test_setting'));
        add_action('wp_head',array($this,'my_test_head_fun'));

        //引入js
        wp_enqueue_script('my_test',plugins_url('js/my_test.js',__FILE__),array('jquery'));
        //注册ajax处理页面 第一个参数必须相同
        wp_localize_script('my_test','ajax_object',array('ajax_url'=>admin_url('admin-ajax.php')));
        //处理ajax 钩子
        add_action('wp_ajax_my_color_check', array($this,'color_check_fun'));
        add_action('wp_ajax_my_test',array($this,'my_test'));
    }
    public function color_check_fun(){
        if(trim($_POST['color']) != ""){
            echo 'ok';
        }
        //ajax 处理结束
        wp_die();

    }
    public function my_test(){
        if($_POST){
            echo "hello word";
        }
        wp_die();
    }
...

相关文章