Làm sao để sử dụng đúng cách AJAX trong WordPress

September 30, 2014 Phát Triển WordPress No comments

Chào các bạn, trong việc phát triển Theme và Plugin thì chắc hẳn ít nhiều các bạn cũng có sử dụng thêm AJAX. Cách thường dùng là chúng ta sẽ tạo ra các file php để xử lý request từ AJAX. Cách này khá mất công khi chúng ta vừa phải tạo mới file, vừa phải include các file cần thiết để có thể tương tác và sử dụng được hàm WordPress. Cách này tuy vẫn đáp ứng được nhưng không khuyến khích dùng. Vì thế trong bài viết này mình sẽ hướng dẫn các bạn cách sử dụng AJAX trong WordPress đúng cách hơn.

Việc sử dụng AJAX trong WordPress rất đơn giản. Các bạn 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}.

Xem thêm: Action & Filter trong WordPress

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:

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);
        }
    });
});

Các bạn chạy lại và xem kết quả nhé. Vẫn y hệt kết quả như trước phải không nào?

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.

Thử luôn ví dụ cho các bạn dễ hiểu.

    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 }

Mình dùng hook admin_footer để thêm 1 đoạn script vào footer của trang quản lý, các bạn có thể sử dụng file js riêng đều được. Nội dung đoạn code tương tự ví dụ trên chỉ khác chỗ option url thôi. Phần xử lý AJAX thông qua 2 hook bên trên các bạn vẫn giữ nguyên. Vào trang quản lý, f12 và kiểm tra kết quả nhé.

Lời kết

Mình đã hướng dẫn xong cách sử dụng AJAX trong WordPress. Hy vọng qua bài viết này các bạn có thể hiểu và biết cách vận dụng AJAX tốt hơn trong WordPress. Mọi vướng mắc các bạn có thể comment bên dưới để được sự hỗ trợ từ mọi người.