Trong bài viết này, chúng tôi sẽ trình bày chi tiết cách ajax hoạt động trong wordpress để download và đọc dữ liệu từ backend và frontend. Thông qua bài viết này, bạn sẽ hiểu cách Ajax hoạt động. Làm thế nào để truyền và nhận dữ liệu một cách chính xác.

Tại sao và khi nào nên sử dụng Ajax

Ajax rất tuyệt, nó giúp chúng ta tải dữ liệu mà không cần tải lại trang web. Nhờ đó, có thể tăng tốc trang web và giúp người dùng thuận tiện hơn. Vì vậy, sử dụng ajax ở đúng nơi sẽ giúp tải trang nhanh hơn.

Khi nào nên sử dụng ajax? Khi bạn muốn làm gì đó mà không tải lại trang web, hãy sử dụng Ajax

Cái nhìn khái quát

Vậy, dòng ajax trong wordpress là gì?

Từ Jquery (Ajax) chuyển các tham số vào xử lý thông qua wp_ajax_ và wp_ajax_nopriv_. Sau đó, trình xử lý php sẽ trả kết quả về cho Js và từ đó tôi sẽ thực hiện hành động dựa trên kết quả được trả về.

Chuẩn bị kiến thức

Để Tìm hiểu và làm điều đó, chúng ta cần:

  • Đọc bài này   trên codex như ví dụ của nó.
  • Tìm hiểu 2 hành động wp_ajax_   và wp_ajax_nopriv_
  • Ít nhất biết về Jquery

Ví dụ thực tế

Một ví dụ đơn giản như sau: Nhấp vào từ “Thông báo“ sẽ hiển thị thông báo (dạng cảnh báo) có chứa kết quả được trả về khi một biến được truyền và sửa lỗi.

Mã code 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 để sửa lỗi như sau. Có thể viết js để tách file 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 : 'hoangweb.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óm tắt file index.php chúng tôi có những điều sau đây

<?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 : 'hoangweb.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();?>

Kịch bản php sửa lỗi dữ liệu và trả về giá trị. Mã trong file functions.php

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 một chút về chức năng trên:

  • Tên hành động ở đây là thongbao Vì vậy, hãy viết wp_ajax_thongbao và wp_ajax_nopriv_thongbao Trong đó: wp_ajax_thongbao: chỉ người dùng login mới có thể thực thi hành động ‘thongbao’ wp_ajax_nopriv_thongbao: Đối với tất cả những người chưa đăng nhập có thể thực hiện hành động thongbao
  • Vì js để định dạng dữ liệu là json nên phải sử dụng json_encode trước khi trả lại dữ liệu. Trong WP có wp_send_json_success () và wp_send_json_error () hỗ trợ điều đó.
  • Tùy thuộc vào phương thức truyền mà chúng ta nhận được giá trị từ bên ngoài. Ví dụ: chúng tôi có $ _ POST [website]

Như vậy đó. Bây giờ bạn nhấp vào từ “Thông báo“ sẽ cảnh báo “Chào mừng bạn đến với hoangweb.com”

Ví dụ: lấy 5 bài đăng mới nhất với ajax

Mã 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();?>

Code nằm trong functions.php để sửa lỗi 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ờ thì đã Xong, nhấp vào từ “Tải 5 bài mới nhất“ sẽ tải 5 mục cuối vào ‘div’ với class ‘loadpost_result’ với ajax

Chúc chúng ta thành công ^^

Last modified: Tháng Tám 5, 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.