Chào các bạn lại đến với blog của mình nè!
Hôm nay mình sẽ chia sẻ với các bạn về cách thức hoạt động của ajax trong wordpress để thực hiện việc giao tiếp, xử lý data, truyền tải dữ liệu giữa backend và frontend. Hi vọng các bạn có thể hiểu thêm về Ajax trong WordPress. Thích thú lập trình với wordpress hơn nữa, chứ không phải là ngồi kéo thả hoặc cứ bảo “wordpress dễ lắm :D”

 

Bắt đầu nào!

Yêu cầu:
Để hiểu được bài viết này bắt buộc bạn phải từng code qua Ajax trong PHP. Còn bạn là người mới bắt đầu thì mình khuyên bạn nên tắt bài viết của mình đi đã, tìm hiểu và thực hành về ajax trong php rồi hẳn quay lại nhé!
Và, bạn cũng phải từng tìm hiểu về wordpress 🙂
 

Vào thôi.

Ví dụ ở đây như sau: Khi click vào 1 button có id là `touch-me` chúng ta sẽ gửi ajax lên backend trả về 1 string đơn giản, sau đó hiển thị alert cho người dùng chuỗi đó.

Chúng ta có đoạn HTML như sau

Touch Me

Sau đó code ajax sẽ như sau, mình đính kèm chú thích trong từng đoạn code ajax luôn nhé. Bạn xem kỹ hen

 
$(document).ready(function(){
    $('#touch-me').click(function(){
        $.ajax({
            type : "POST", //Phương thức truyền dữ liệu (post hoặc get)
            url : '', //Đường dẫn dẫn đến backend của wordpress
            data : {
                action: "touch_me", //Tên action, tham số này bắt buộc phải có cho mỗi ajax nha
            },
            success: function(response) {
                alert(response) //thực hiện xử lý dữ liệu trả về từ backend
            }
        })
    })
})

Ajax có thêm nhiều config để xử lý thêm cho phù hợp với mỗi bài toán. Ở đây mình không viết nhiều chi tiết, chỉ những config đủ để một ajax có thể làm việc trong wordpress.

Tiếp theo, là code PHP xử lý. Bạn đặt code trong file functions.php của thư mục theme mình đang làm việc nhé

add_action( 'wp_ajax_touch_me', 'ajax_touch_me' );
add_action( 'wp_ajax_nopriv_touch_me', 'ajax_touch_me' );
function ajax_touch_me() {
    //xử lý dữ liệu truyền lên
    $str = 'Làm chủ ajax trong wordpress';

    //trả về frontend dạng kiểu dữ liệu json
    wp_send_json_success($str);
 
    die(); //kết thúc action của phương thức này. Bạn phải luôn luôn đặt hàm này nhé!
}

Mình nói tý về wordpress chỗ này

• Action mình gửi từ frontend lên là `touch_me`. Nên trong code wordpress chúng ta sẽ nối tiếp vào `wp_ajax_touch_me` và `wp_ajax_nopriv_touch_me`
• `wp_ajax_` : qui định hàm xử lý có tác dụng cho những user đã đăng nhập
• `wp_ajax_nopriv_` : có tác dụng đối với tất cả user trong website

Tuỳ vào yêu cầu bài toán mà bạn linh hoạt áp dụng nha.

 

Xong rồi đấy!

Như vậy, qua bài viết này mình đã giới thiệu về cách sử dụng ajax trong wordpress. Từ đó, bạn có thể áp dụng vào code của mình, làm chủ thêm về wordpress.
Chúc bạn thành công!