Hotline : 0908.103.092

Cách sử dụng AJAX trong WordPress một cách chuẩn xác

Như các bạn đã biết AJAX là từ viết tắt của Asynchronous JavaScript And XML, công nghệ này có thể giúp chúng ta lập trình để gửi các giá trị của biến một cách tự động, không cần phải tải lại nguyên trang web. Bởi vì công dụng tuyệt vời của nó, rất nhiều mã nguồn trang web hiện nay đang sử dụng AJAX để tương tác với người dùng, WordPress cũng không phải là ngoại lệ. 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 https://dichvuthietkewebwordpress.com/ sẽ hướng dẫn các bạn cách sử dụng AJAX trong WordPress đúng cách hơn.

ajax_web_development

Asynchronous JavaScript And XML

Cách 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: Thiết lập Favicon trong WorldPress

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.

Để có thể 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é:

ket qua tra ve Hướng dẫn sử dụng AJAX trong WordPress đúng cách

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:

1
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é.

Tổng 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. Ngoài ra các bạn có thể tham khảo thêm một số thủ thuật WorldPress khác ở đây nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

WEBSITE WORDPRESS CHUYÊN NGHIỆP
VỚI ĐẦY ĐỦ TÍNH NĂNG ƯU VIỆT
lam web wordpress

Tính sẵn sàng & tùy biến cao

thiet ke web ban hang

Giỏ hàng, thanh toán tiện lợi

bao gia thiet ke website wordpress

Kho giao diện đa dạng

web wordpress chuan seo

Công cụ Marketing hiệu quả

ZoomWorld giới thiệu tới khách hàng dịch vụ thiết kế website bán hàng chuyên nghiệp với tính sẵn sàng luôn đáp ứng yêu cầu của khách hàng mọi lúc mọi nơi một cách nhanh chóng nhất kết hợp với tính tùy biến cao có khả năng thay đổi website phù hợp theo từng hoàn cảnh của Doanh nghiệp bạn.
thiet ke website wordpress
0908 103 092