Ajax framework
var $ = jQuery.noConflict()
$(function(){
$('#btn').on('click',function(){
var data = {
action: "myajax", // 這是綁定 wp hook 的關鍵字，千千萬萬不能漏掉
security: ajax_params.nonce, // toekn 驗證
name: $("input[name='username']").val() // 要傳給後端的參數
};
$.ajax({
url: ajax_params.ajaxurl, // ajax_params 參數在 wp_localize_script 定義
data: data,
type: 'POST',
dataType: "json",
success: function (data) {
console.log(data.log); // data 為接收回傳的參數
}
})
})
})<?php
function ajax_scripts() {
wp_register_script('my_ajax', plugin_dir_url( __DIR__) . '/js/poll.js', array('jquery'),null,true );
wp_localize_script('my_ajax', 'ajax_params', array(
'ajaxurl' => site_url(). '/wp-admin/admin-ajax.php', // WordPress AJAX URL
'nonce' => wp_create_nonce('ajax-nonce'), // TOKEN 驗證，裡面的值要跟下面的 handler 一樣
'other' => 'something'
));
wp_enqueue_script('my_ajax');
}
function myajax_ajax_handler(){
// TOKEN 驗證
if (!wp_verify_nonce($_POST['security'], 'ajax-nonce')) { // 第二個參數要跟上面的 wp_create_nonce 的一樣
wp_send_json_error(array('code' => 500, 'data' => '', 'msg' => '錯誤的請求'));
}
echo json_encode(
array(
'result'=>'Ajax Success', // 把 php 參數編譯為 json 檔讓傳給 js
)
);
die;
}
add_action('wp_enqueue_scripts', ajax_scripts);
add_action('wp_ajax_myajax', myajax_ajax_handler);
add_action('wp_ajax_nopriv_myajax', myajax_ajax_handler);Tags:
- ajax
- /
