Sử dụng Ajax trong wordpress

Cập nhật lần cuối 28/07/2017 by trong WordPress vào 22/01/2014 có 2078 Views

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.

Nội dung chính

  1. Vì sao và khi nào thì sử dụng Ajax
  2. Cái nhìn khái quát
  3. Chuẩn bị kiến thức
  4. Ví dụ thực tế
  5. Ví dụ lấy danh sách 5 bài viết mới nhất

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_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

<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 : 'levantoan.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>

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 : 'levantoan.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 nha

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ết wp_ajax_thongbao và 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()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 levantoan.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 ^^

Sử dụng Ajax trong wordpress
4.3 (85.71%) 7 votes
  • Bình luận
Có thể bạn quan tâm
x