Sử dụng Ajax trong wordpress

Sử dụng AJAX trong WordPress không cần phải tạo ra bất kỳ file nào để xử lý request từ AJAX mà sử dụng chính file admin-AJAX.php trong thư mục wp-admin để xử lý thông qua 2 hook mà WordPress đã cung cấp sẵn: wp_AJAX_{action} và wp_AJAX_nopriv_{action}.

Hook wp_AJAX_{action} áp dụng khi người dùng đã đăng nhập và hook wp_AJAX_nopriv_{action} áp dụng khi người dùng không đăng nhập.

Để hiểu được cách sử dụng, các bạn làm theo ví dụ này của mình. Thêm đoạn code sau vào file functions.php:

add_action( 'wp_footer', 'dvd_action_javascript' );
function dvd_action_javascript() {
?><script>// <![CDATA[
jQuery(document).ready(function($) {
$.AJAX({
type : 'POST',
data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
url : '<?php echo admin_url( "admin-AJAX.php" ); ?>',
success : function (resp){
console.log(resp);
}
});
});
// ]]></script><!--?php
}

Đoạn code trên đơn giản là sử dụng hàm AJAX để gửi request đến file xử lý (/wp-admin/admin-AJAX.php). Đoạn script trên sẽ được thêm vào footer của theme thông qua hook wp_footer. Các bạn có thể sử dụng bất kỳ hàm AJAX nào khác như post, get … của Jquery.

Các bạn lưu ý chỗ dữ liệu gửi đi, với action thì bắt buộc phải có để có thể sử dụng được 2 hook ở trên. Giá trị của action thì có để đặt tùy ý và giá trị này sẽ được thay vào {action} của 2 hook bên trên. Thêm tiếp đoạn code sau:

add_action('wp_AJAX_dvd_action', 'dvd_action');
add_action('wp_AJAX_nopriv_dvd_action', 'dvd_action');
function dvd_action() {
echo $_POST['data'];
die();
}

Các bạn để ý tên 2 hook bên trên. Với hook wp_AJAX_{action}, {action} là dvd_action. Tương tự với hook wp_AJAX_nopriv_{action}, {action} cũng là dvd_action do bên trên dữ liệu gửi đi mình đã khai báo với action là dvd_action. Các bạn thấy đấy, dựa vào action để nó có thể xác định được đúng request và xử lý chúng.

Trong hàm xử lý mình sẽ echo ra dữ liệu gửi lên từ AJAX và khi người dùng đăng nhập hay không đăng nhập thì hàm xử lý này vẫn sẽ hoạt động. Nếu muốn giới hạn thì các bạn có thể chọn 1 trong 2 hook trên cho phù hợp. Lưu ý: để nhận đúng kết quả trả về thì nên kết thúc hàm bằng hàm die(); hoặc exit();

Thử chạy và f12 lên xem kết quả nhé:

Trong trường hợp các bạn muốn sử dụng đoạn script trên thông qua 1 file js thì cần phải đăng ký 1 biến global lưu đường dẫn tới file xử lý thông qua hàm sau:

1	wp_localize_script( $handle, $name, $data );

Trong đó:

– $handle là tên script đã đăng ký

– $name là tên biến sẽ chứa dữ liệu

– $data là mảng chứa dữ liệu cho biến $name

Cụ thể hơn các bạn làm tiếp ví dụ sau sẽ hiểu:

Đoạn code xử lý AJAX ở trên vẫn giữ nguyên, mình sẽ thay đổi lại đoạn script thay vì dùng thông qua hook thì mình sẽ dùng thông qua 1 file js. Ở đây mình đặt tên là my_js.js và nó nằm trong thư mục js của theme. Trước hết mình đăng ký file my_js.js và 1 đối tượng lưu đường dẫn tới file xử lý:

add_action('init', 'dvd_enqueue_script');
function dvd_enqueue_script(){
wp_register_script('dvd_js', get_template_directory_uri() . '/js/my_js.js', array('jquery'), null, false);
wp_localize_script('dvd_js', 'AJAX', array('url' => admin_url('admin-AJAX.php')));
wp_enqueue_script('dvd_js');
}

Sau khi đã đăng ký xong mình có thể lấy đường dẫn tới file xử lý trong my_js.js bằng cách sử dụng: AJAX.url:

jQuery(document).ready(function($) {
$.AJAX({
type : 'POST',
data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
url : AJAX.url,
success : function (resp){
console.log(resp);
}
});
});

Trường hợp các bạn sử dụng AJAX trong trang quản lý (dashboard) thì không cần phải khai báo đường dẫn tới file xử lý (admin-AJAX.php) nữa. Bởi vì WordPress đã cung cấp sẵn 1 biến global có tên AJAXurl lưu đường dẫn tới file xử lý rồi. Việc của chúng ta là lấy ra mà dùng thôi.

Ví dụ.

add_action( 'admin_footer', 'dvd_action_javascript' );
function dvd_action_javascript() {
?><script>// <![CDATA[
jQuery(document).ready(function($) {
$.AJAX({
type : 'POST',
data : {'action' : 'dvd_action', 'data' : 'du lieu gui len server'},
url : AJAXurl,
success : function (resp){
console.log(resp);
}
});
});
// ]]></script><?php }