在页面上提交一些简单的数据时,使用 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"
会自动加载在头部。
<div class="target">点击提交 <input class="post_id" type="hidden" value="77" />
这一段代码放在页面中需要的位置,点击“点击提交”后,数据会通过 Ajax 提交给ajax_action_stuff
,ajax_action_stuff
执行成功后返回 data 给相应的 jQuery 代码,整个 Ajax 流程就成功完成了。