在 WordPress 中使用 Ajax 提升用户体验度

使用Ajax实现快速数据提交和页面更新

在页面上提交一些简单的数据时，使用Ajax操作可以避免刷新整个页面，快速的完成数据的提交和界面的更新，对于一些简单的操作，使用Ajax提交和更新数据会给用户比较好的体验，大家见得比较多的Ajax实例应该就是QQ空间的点赞和收藏了。

WordPress系统对Ajax操作的支持

WordPress系统对Ajax操作提供了很好的支持，我们只需要很少的工作，就可以完成Ajax提交，一起来看一下以下代码。

functionenqueue_scripts_styles_init(){
wp_enqueue_script('ajax-script',get_stylesheet_directory_uri().'/js/script.js',array('jquery'),1.0);//jQuery会自动加载
//get_template_directory_uri().'/js/script.js';//父主题中使用
//get_stylesheet_directory_uri().'/js/script.js';//子主题中使用
//plugins_url('/js/script.js',__FILE__);//插件中使用
wp_localize_script('ajax-script','ajax_object',array('ajaxurl'=>admin_url('admin-ajax.php')));//设置ajaxurl
}
add_action('init','enqueue_scripts_styles_init');

functionajax_action_stuff(){
$post_id=$_POST['post_id'];//为ajax提交获取参数
//执行ajax操作
update_post_meta($post_id,'post_key','meta_value');
echo'ajax已提交';
die();//停止执行
}
add_action('wp_ajax_ajax_action','ajax_action_stuff');//为登录用户添加ajax功能
add_action('wp_ajax_nopriv_ajax_action','ajax_action_stuff');//为未登录用户添加功能

以上是Ajax提交所需要的PHP代码，把以上代码放到主题的functions.php文件或插件文件中，就为Ajax提交做好了后端的支持。当然，我们也可以通过一些类库来自定义WordPressUrl路由来实现Ajax操作的后端。

实现Ajax提交的jQuery代码

jQuery(function($){
$('.target').click(function(){
$.post(
ajax_object.ajaxurl,{
action:'ajax_action',
post_id:$(this).find('input.post_id').attr('value')
},
function(data){
c-alert(data);//提示'ajax已提交',也可以把成功的消息更新到DOM中
});
});
});

另外一种写法：

jQuery(function($){
$('.target').click(function(){
$.ajax({
url:ajax_object.ajaxurl,
type:'POST',
data:{
'action':'example_ajax_request',
'post_id':$(this).find('input.post_id').attr('value')
},
success:function(data){
c-alert(data);//提示'ajax已提交',也可以把成功的消息更新到DOM中
},
error:function(errorThrown){
console.log(errorThrown);
}
});
});
});

这一段是Ajax提交的jQuery代码，可以放到网站公用的js文件或直接放到页面中，其中"ajaxurl"会自动加载在头部。

提交数据的HTML代码

<divclass="target">点击提交<inputclass="post_id"type="hidden"value="77"/>

这一段代码放在页面中需要的位置，点击“点击提交”后，数据会通过Ajax提交给ajax_action_stuff，ajax_action_stuff执行成功后返回data给相应的jQuery代码，整个Ajax流程就成功完成了。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。