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

在页面上提交一些简单的数据时，使用 Ajax 操作可以避免刷新整个页面，快速的完成数据的提交和界面的更新，对于一些简单的操作，使用 Ajax 提交和更新数据会给用户比较好的体验，大家见得比较多的 Ajax 实例应该就是 QQ 空间的点赞和收藏了。
WordPress 系统对 Ajax 操作提供了很好的支持，我们只需要很少的工作，就可以完成 Ajax 提交，一起来看一下以下代码。

function enqueue_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');

function ajax_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 提交做好了后端的支持。当然，我们也可以通过一些类库来自定义 WordPress Url 路由来实现 Ajax 操作的后端。

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”会自动加载在头部。

点击提交 

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