Cách sử dụng Ajax trong WordPress

Ajax là kỹ thuật giúp xây dựng website động mà không cần phải load lại trang. Thông thường sau khi thực hiện một hành động nào đó như gửi Form, tìm kiếm, phân trang trong WordPress… Thì trang đó sẽ bị reload lại.

Đối với Ajax sẽ thực hiện request tới server và response lại phía client mà mọi dữ liệu đầu vào không bị mất đi.

Để sử dụng được Ajax bạn cần có chút về JavaScript và Jquery.

Xử lý phía Front-end

Đặt đoạn mã này trong cặp thẻ <script>…</script> và bên trong tập tin footer.php

$(document).ready(function(){
    $('.buttonMore').click(function(){
        $.ajax({
           type : "post",
           dataType : "html",
           url : '<?php echo admin_url('admin-ajax.php');?>',
           data : {
                action: "readmore",
                mess: "Nội dung thông báo"
           },
           beforeSend: function(){
                // Code
           },
           success: function(response) {
                $('.result').html(response);
           },
           error: function( jqXHR, textStatus, errorThrown ){
                //Làm gì đó khi có lỗi xảy ra
                console.log( 'The following error occured: ' + textStatus, errorThrown );
           }
       });
    });
});

Mình sẽ giải thích cụ thể như sau:

– Trước tiên sẽ sử dụng jQuery để lắng nghe sự kiện click

$(document).ready(function(){ 
  $('.buttonMore).click(function(){
  //
  });
});

.buttonMore là class của button

Bạn có thể tham khảo lại kiến thức qua bài Sự kiện Click() trong Jquery

– Tiếp theo thực hiện xử lý Ajax bằng khối lệnh

$.ajax({
  // Code
});

Trong đó:

type : “post” đây là phương thức xử lý gồm có GET, POST, PUT, DELETE, PATCH. 5 methods cơ bản dùng để gọi phía server Restful.
dataType : “html” đây là kiểu dữ liệu được trả về, có thể là JSON, script hay HTML
url : ‘<?php echo admin_url(‘admin-ajax.php’);?>’ Đường dẫn mặc định trong WordPresss chứa hàm xử lý dữ liệu.
action: “readmore” đây là tên của action. Sẽ được sử dụng trong PHP
beforeSend: function(){ // Code } Đoạn mã này được dùng để làm gì đó trước khi gửi dữ liệu. Có thể là thêm một hình ảnh động đang load chẳng hạn.
success: function(response) { $(‘.result’).html(response); } Đoạn mã này sẽ trả về dữ liệu vào class .result dưới dạng HTML.

Xử lý phía backend

Tiếp theo đó cần một đoạn mã để xử lý dữ liệu phía backend bằng mã PHP.

add_action( 'wp_ajax_readmore', 'getPost' );
add_action( 'wp_ajax_nopriv_readmore', 'getPost' );
function getPost() {
  // Code Logic
}

Quan sát đoạn code phía trên bạn sẽ thấy nó sử dụng Action Hook để truyền dữ liệu từ hàm (function) và action đã đặt ở trên với ajax action: “readmore”.

wp_ajax_ và wp_ajax_nopriv_ đây là mặc định của WordPress. Khi viết bạn chỉ cần thêm tên action phía sau là được.

Ở bên trong hàm function getPost() {} bạn sẽ viết các đoạn mà PHP như WP_Query lấy bài viết chẳng hạn.

Chỉ đơn giản như vậy thôi. Nếu bạn chưa biết cách sử dụng Ajax trong WordPress hãy đọc và thực hành ngay đi nhé.