Trong bài này chúng ta sẽ đi tìm hiểu cách thức hoạt động của ajax trong wordpress để tải và đọc dữ liệu từ backend và frontend. Qua bài này các bạn sẽ hiểu Ajax trong WordPress hoạt động ra sao. Cách truyền và nhận dữ liệu như nào cho đúng.
Vì sao và khi nào thì sử dụng Ajax
Ajax rất hay, nó giúp chúng ta có thể load dữ liệu mà không cần tải lại trang web. Nhờ đó mà có thể tăng tốc website, tiện dụng cho người dùng hơn rất nhiều. Vì vậy sử dụng ajax vào đúng chỗ sẽ giúp load trang nhanh hơn.
Khi nào dùng ajax? Khi bạn muốn thực hiện 1 hành động gì đó mà không muốn tải lại trang web thì sử dụng Ajax
Cái nhìn khái quát
Vậy luồng của ajax trong wordpress như nào?
Từ Jquery (Ajax) truyền tham số vào xử lý thông qua wp_ajax_ và wp_ajax_nopriv_. Sau đó bên PHP xử lý xong sẽ trả kết quả về lại Js và từ đó mình sẽ thực hiện hành động dựa trên kết quả trả về
Chuẩn bị kiến thức
Để tìm hiểu và làm được thì các bạn cần:
- Đọc bài này trên codex cũng như ví dụ của nó.
- Tìm hiểu 2 action
wp_ajax_vàwp_ajax_nopriv_ - Tối thiểu biết về
Jquery
Ví dụ thực tế
Ví dụ đơn giản như sau: Click vào chữ Thông báo thì sẽ hiện thông báo (dạng alert) chứa kết quả trả về khi truyền 1 biến và xử lý
Đoạn html cơ bản trong file index.php như sau
<?php get_header();?>
<a href="#" class="click_popup">Thông báo</a>
<?php get_footer();?>
Đoạn js truyền dữ liệu vào php để xử lý như sau. Có thể viết js ra file riêng hoặc viết trực tiếp trên file php, html
(function($){
$(document).ready(function(){
$('.click_popup').click(function(){
$.ajax({
type : "post", //Phương thức truyền post hoặc get
dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html
url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy
data : {
action: "thongbao", //Tên action
website : 'layoutup.com',//Biến truyền vào xử lý. $_POST['website']
},
context: this,
beforeSend: function(){
//Làm gì đó trước khi gửi dữ liệu vào xử lý
},
success: function(response) {
//Làm gì đó khi dữ liệu đã được xử lý
if(response.success) {
alert(response.data);
}
else {
alert('Đã có lỗi xảy ra');
}
},
error: function( jqXHR, textStatus, errorThrown ){
//Làm gì đó khi có lỗi xảy ra
console.log( 'The following error occured: ' + textStatus, errorThrown );
}
})
return false;
})
})
})(jQuery)
Tổng hợp lại file index.php đầy đủ ta có như sau
<?php get_header();?>
<a href="#" class="click_popup">Thông báo</a>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.click_popup').click(function(){
$.ajax({
type : "post", //Phương thức truyền post hoặc get
dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html
url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy
data : {
action: "thongbao", //Tên action
website : 'layoutup.com',//Biến truyền vào xử lý. $_POST['website']
},
context: this,
beforeSend: function(){
//Làm gì đó trước khi gửi dữ liệu vào xử lý
},
success: function(response) {
//Làm gì đó khi dữ liệu đã được xử lý
if(response.success) {
alert(response.data);
}
else {
alert('Đã có lỗi xảy ra');
}
},
error: function( jqXHR, textStatus, errorThrown ){
//Làm gì đó khi có lỗi xảy ra
console.log( 'The following error occured: ' + textStatus, errorThrown );
}
})
return false;
})
})
})(jQuery)
</script>
<?php get_footer();?>
Đoạn PHP xử lý dữ liệu và trả về giá trị. Code trong functions.php
add_action( 'wp_ajax_thongbao', 'thongbao_init' );
add_action( 'wp_ajax_nopriv_thongbao', 'thongbao_init' );
function thongbao_init() {
//do bên js để dạng json nên giá trị trả về dùng phải encode
$website = (isset($_POST['website']))?esc_attr($_POST['website']) : '';
wp_send_json_success('Chào mừng bạn đến với '.$website);
die();//bắt buộc phải có khi kết thúc
}
Giải thích 1 chút về hàm trên:
- Tên action ở đây là
thongbao. Vậy nên sẽ viếtwp_ajax_thongbaovàwp_ajax_nopriv_thongbao. Trong đó: wp_ajax_thongbao: chỉ user đã nhập với có thể thực hiện action thongbao wp_ajax_nopriv_thongbao: Cho tất cả mọi người chưa login đều có thể thực hiện action thongbao - Do js để dạng dữ liệu là json vì thế phải sử dụng json_encode trước khi trả dữ liệu ra ngoài. Trong WP có wp_send_json_success() và wp_send_json_error() hỗ trợ điều đó.
- Tùy vào phương thức truyền biến mà ta nhận được giá trị từ bên ngoài. Như ví dụ ta có $_POST[‘website]
Vậy là xong rồi. Bây giờ bạn click vào chữ “Thông báo” sẽ alert lên “Chào mừng bạn đến với layoutup.com”
Ví dụ lấy 5 bài viết mới nhất bằng ajax
Đoạn code html và js viết trong index.php
<?php get_header();?>
<div class="loadpost_result"></div>
<a href="#" class="click_loadpost">Tải 5 bài mới nhất</a>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.click_loadpost').click(function(){
$.ajax({
type : "post", //Phương thức truyền post hoặc get
dataType : "json", //Dạng dữ liệu trả về xml, json, script, or html
url : '<?php echo admin_url('admin-ajax.php');?>', //Đường dẫn chứa hàm xử lý dữ liệu. Mặc định của WP như vậy
data : {
action: "loadpost", //Tên action
},
context: this,
beforeSend: function(){
//Làm gì đó trước khi gửi dữ liệu vào xử lý
},
success: function(response) {
//Làm gì đó khi dữ liệu đã được xử lý
if(response.success) {
$('.loadpost_result').html(response.data);
}
else {
alert('Đã có lỗi xảy ra');
}
},
error: function( jqXHR, textStatus, errorThrown ){
//Làm gì đó khi có lỗi xảy ra
console.log( 'The following error occured: ' + textStatus, errorThrown );
}
})
return false;
})
})
})(jQuery)
</script>
<?php get_footer();?>
Đoạn code trong functions.php để xử lý dữ liệu
add_action( 'wp_ajax_loadpost', 'loadpost_init' );
add_action( 'wp_ajax_nopriv_loadpost', 'loadpost_init' );
function loadpost_init() {
ob_start(); //bắt đầu bộ nhớ đệm
$post_new = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => '5'
));
if($post_new->have_posts()):
echo '<ul>';
while($post_new->have_posts()):$post_new->the_post();
echo '<li>'.get_the_title().'</li>';
endwhile;
echo '</ul>';
endif; wp_reset_query();
$result = ob_get_clean(); //cho hết bộ nhớ đệm vào biến $result
wp_send_json_success($result); // trả về giá trị dạng json
die();//bắt buộc phải có khi kết thúc
}
Bây giờ khi đã làm xong bạn click vào chữ “Tải 5 bài mới nhất” sẽ load 5 bài mới nhất vào div có class loadpost_result bằng ajax
Chúc các bạn thành công ^^