以字体样式插件为例，当用户输入字体颜色值时异步判断值类型是否合法
引入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-contentpluginsjs 新键文件 my_test.js
代码语言：javascript复制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请求进行处理 在构造函数中
代码语言：javascript复制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
示例 标题被点击时输出后台的返回值
代码语言：javascript复制//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();
}
...
