在頁面上提交一些簡單的數(shù)據(jù)時(shí)，使用 Ajax 操作可以避免刷新整個頁面，快速的完成數(shù)據(jù)的提交和界面的更新，對于一些簡單的操作，使用 Ajax 提交和更新數(shù)據(jù)會給用戶比較好的體驗(yàn)，大家見得比較多的 Ajax 實(shí)例應(yīng)該就是 QQ 空間的點(diǎn)贊和收藏了。
WordPress 系統(tǒng)對 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' ) ) ); // 設(shè)置ajaxurl
}
add_action('init', 'enqueue_scripts_styles_init');
function ajax_action_stuff() {
$post_id = $_POST['post_id']; // 為ajax提交獲取參數(shù)
// 執(zhí)行ajax操作
update_post_meta($post_id, 'post_key', 'meta_value');
echo 'ajax 已提交';
die(); //停止執(zhí)行
}
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 提交做好了后端的支持。當(dāng)然，我們也可以通過一些類庫來自定義 WordPress Url 路由來實(shí)現(xiàn) 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 代碼，可以放到網(wǎng)站公用的js文件或直接放到頁面中，其中"ajaxurl"會自動加載在頭部。
<div class="target">點(diǎn)擊提交 <input class="post_id" type="hidden" value="77" />
這一段代碼放在頁面中需要的位置，點(diǎn)擊“點(diǎn)擊提交”后，數(shù)據(jù)會通過 Ajax 提交給ajax_action_stuff，ajax_action_stuff執(zhí)行成功后返回 data 給相應(yīng)的 jQuery 代碼，整個 Ajax 流程就成功完成了。
