Sử dụng AJAX trong WordPress

Cập nhật lần cuối vào

Bài viết này mình sẽ hướng dẫn cho các bạn cách áp dụng kỹ thuật AJAX vào trong lập trình WordPress. Đây là một kỹ thuật rất hay, bạn có thể áp dụng để xử lý rất nhiều chức năng, đại loại như chức năng tạo nút xem thêm nhiều bài viết mà không cần phải sử dụng đến phân trang. Nếu bạn là người mới, bạn chưa biết đến khái niệm AJAX thì xin mời bạn ghé vào đường link mình gửi để biết thêm chi tiết.

Sử dụng Ajax trong bảng điều khiển admin

Kể từ khi WordPress tích hợp, xử lý thông tin trong bảng điều khiển hoàn toàn bằng AJAX. Bạn cũng có thể chèn code JavaScript để thực thi AJAX trong trường hợp giao diện hoặc plugin của bạn có code liên quan đến dashboard.

Ví dụ ngắn bên dưới sẽ giúp bạn hình dung ra cái nhìn khái quát đầu tiên về cách sử dụng AJAX trong bảng điều khiển của WordPress.

function sb_add_javascript_admin_footer() { ?>
	<script>
	(function($){
		var data = {
			'action': 'sb_test_ajax',
			'number': 6
		};
		
		// Ke tu phien ban 2.8 thi ajaxurl luong duoc khai bao trong header va tro toi admin-ajax.php
		$.post(ajaxurl, data, function(response){
			alert('Du lieu duoc tra ve tu server: ' + response);
		});
	})(jQuery);
	</script> <?php
}
add_action('admin_footer', 'sb_add_javascript_admin_footer');

Trong ví dụ trên là mình tạo ra một hàm với nội dung là khai báo thông tin JavaScript có chứa code áp dụng kỹ thuật AJAX. Sau đó mình sử dụng hook admin_footer để xuất thông tin này ra dưới footer của bảng điều khiển admin.

Chú ý: Kể từ phiên bản 2.8 trở đi thì biến toàn cục ajaxurl lúc nào cũng được đặt trong header của bảng điều khiển admin.

Sau khi bạn đã tạo xong đoạn JavaScript để gửi yêu cầu lên server thì bây giờ bạn viết code PHP để xử lý thông tin yêu cầu từ người dùng.

function sb_test_ajax_callback() {
	$number = isset($_POST['number']) ? intval($_POST['number']) : 0;
	$number += 10;
	echo $number;
	die();
}
add_action('wp_ajax_sb_test_ajax', 'sb_test_ajax_callback');

Sau khi bạn hoàn thành cả code JavaScript và code PHP, bạn tải lại trang thì trên màn hình sẽ hiển thị lên thông báo: “Du lieu duoc tra ve tu server: 16”.

Chú ý: Nếu bạn muốn sử dụng AJAX trong WordPress thì bắt buộc phải có khai báo action như trong đoạn JavaScript trên mình đã làm. Với giá trị của action là đoạn chuỗi gắn phía sau của hook wp_ajax_, ở đây cụ thể hơn mình đã khai báo action là sb_test_ajax thì hook bạn sử dụng phải là wp_ajax_sb_test_ajax.

Trong hàm thực thi lệnh Ajax được gửi từ client lên, lúc nào bạn cũng phải để hàm die vào cuối cùng của thân hàm. Nếu như action của bạn không khai báo đúng thì lúc nào giá trị trả về của hàm Ajax cũng là số 0.

Ngoài ra, bạn cần phải viết nhiều code để kiểm tra và xử lý thông tin, đặc biệt là vấn đề bảo mật. Bạn sẽ phải sử dụng hàm check_ajax_referer nếu cần thiết. Tuy nhiên, hy vọng rằng với ví dụ nhỏ bên trên bạn đã có thể phần nào hiểu được nguyên lý hoạt động của AJAX trong WordPress.

Đối với tập tin Javascript riêng

Trong trường hợp bạn sử dụng tập tin Javascript được khai báo bên ngoài, bạn phải áp dụng thêm một vài thao tác trước khi AJAX có thể hoạt động được. Ví dụ bây giờ code Javascript của mình được đặt trong tập tin /js/sb-admin-script.js, với nội dung của tập tin này như sau:

(function($){
	var data = {
		'action': 'sb_test_ajax',
		'number': 6
	};
	
	// Bien toan cuc sb_admin_ajax ban phai khai bao truoc, ben trong chua url den tap tin admin-ajax.php
	$.post(sb_admin_ajax.url, data, function(response){
		alert('Du lieu duoc tra ve tu server: ' + response);
	});
})(jQuery);

Khi lập trình WordPress, đối với các tập tin style và script ngoại thì bạn phải sử dụng hàm enqueue. Ở đây, mình sẽ sử dụng hàm wp_enqueue_script để load tập tin sb-admin-script.js như mình đề cập bên trên.

function sb_admin_style_and_script() {
	wp_enqueue_script('sb-admin', '/js/sb-admin-script.js', array('jquery'), false, true);
	wp_localize_script('sb-admin', 'sb_admin_ajax', array('url' => admin_url('admin-ajax.php')));
}
add_action('admin_enqueue_scripts', 'sb_admin_style_and_script');

Hàm wp_localize_script là bạn phải dùng, bên trong hàm này bạn sẽ nhập tên khai báo của script, biến toàn cục để bạn viết code trong JavaScript, thông tin của biến toàn cục, ở đây mình chỉ để mỗi url đến tập tin admin-ajax.php.

Cuối cùng là bạn viết hàm để xử lý Ajax như mình có giới thiệu ở bên trên.

function sb_test_ajax_callback() {
	$number = isset($_POST['number']) ? intval($_POST['number']) : 0;
	$number += 10;
	echo $number;
	die();
}
add_action('wp_ajax_sb_test_ajax', 'sb_test_ajax_callback');

Sử dụng Ajax trong nhiều trường hợp khác nhau

Đối với hàm xử lý dữ liệu Ajax, bạn phải sử dụng hooK wp_ajax_(action) để thực hiện lệnh, quan trọng nhất là bạn phải điền đúng action mà bạn đã khai báo trong tập tin JavaScript.

  • wp_ajax_nopriv_(action) sẽ thực thi lệnh đối với người dùng chưa đăng nhập.

Nếu bạn muốn thực hiện xử lý Ajax cho cả khách và thành viên thì bạn phải áp dụng cùng lúc 2 hook như bên dưới.

function sb_test_ajax_callback() {
	$number = isset($_POST['number']) ? intval($_POST['number']) : 0;
	$number += 10;
	echo $number;
	die();
}
add_action('wp_ajax_sb_test_ajax', 'sb_test_ajax_callback');
add_action('wp_ajax_nopriv_sb_test_ajax', 'sb_test_ajax_callback');

Chú ý: Không giống như khi thực thi Ajax bên trong bảng điều khiển admin, khi bạn thực thi Ajax bên ngoài front-end thì bạn phải khai báo biến toàn cục để chứa url đến tập tin admin-ajax.php. Trừ trường hợp bạn có sử dụng các plugin liên quan đang sử dụng Ajax và các plugin này đã khai báo biến toàn cục ajaxurl.

Điều quan trọng nữa đó là bạn phải sử dụng hàm wp_localize_script để khai báo cho tập tin JavaScript của bạn.

Cả 2 trường hợp bạn thực thi Ajax bên trong back-end hoặc bên ngoài front-end đều lấy tập tin admin-ajax.php để xử lý. Do vậy, bạn phải cẩn thận khi sử dụng hàm kiểm tra is_admin.

Trong trường hợp bạn bật chức năng cho phép khách sử dụng Ajax, hãy chú ý đến các điều kiện bảo mật, nếu không trang của bạn sẽ dễ bị người ta dòm ngó.

Giá trị trả về khi gặp lỗi

Khi bạn sử dụng Ajax bị lỗi thì thông thường sẽ có 2 kết quả trả về chính, đó số 0 và -1. Tùy thuộc vào nguyên nhân phát sinh ra lỗi mà bạn nhận được con số có thể khác nhau. Thông thường đối với các lỗi bị sai action thì kết quả trả về sau khi thực thi Ajax là số 0.