Gọi sử dụng Ajax trong Wordpress vô cùng đơn giản ai cũng làm được

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 28/10/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    854
    Đã được thích:
    72
    Điểm thành tích:
    28
    Ajax giúp việc xử lý dữ liệu nhanh hơn, chỉ khi nào người dùng cần thì dữ liệu mới được gọi và xử lý, việc này giúp tiết kiệm tài nguyên tải ban đầu rất nhiều, giúp web nhẹ hơn, xử lý nhanh hơn. Và chỉ xử lý đúng cái cần, đưa cho người dùng thấy, cái nào đã xử lý rồi thì không xử lý lại nữa.

    Cơ bản của Ajax là vậy. Vậy xử lý Ajax trong Wordpress như thế nào? làm sao để khai báo và sử dụng được Ajax trong Wordpress dễ nhất và lúc nào cũng chạy tốt, dù web có load cache hay không load cache hay bất kỳ ở trạng thái nào web đều load tải tốt nhất.

    Hôm nay mình sẽ hướng dẫn các bạn 2 cách, 1 cách đơn giản và cách 2 các các Dev thường làm hơi phức tạp nhưng dễ quản lý.

    VD: mình có nút html muốn, mỗi khi người dùng ấn vào cái nút đó nó sẽ load Ajax, và gán dữ liệu lấy được vào thẻ div chỉ định
    Mã:
    <div class="buttonloadajax">Ấn vào đây để chạy Ajax</div>
    <div class="contentmain"></div>
    
    Cách 1 chèn cơ bản:

    Các bạn copy đoạn code javascript sau bỏ vào header hoặc footer của web.
    HTML:
      
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('.buttonloadajax').click(function(){ //khi nút được ấn click kích hoạt
                    $.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, đã có sẵn rồi, không cần cài gì cả
                        data : {
                            action: "itseovnthongbao", //Tên action truyền vào code khi gọi
                            itemvalue : 'itseovn.com',//Biến truyền vào xử lý gọi nó để lấy ra. gọi $_POST['itemvalue'] sẽ trả về là itseovn.com
                        },
                        context: this,
                        success: function(response) {
                            //Làm gì đó khi dữ liệu đã được xử lý
                            if(response.success) {
                                $(".contentmain").html(response.data);
                            }else{
                                 alert('xẩy ra lỗi gì đó');
                            }
                        }
                    })
                    return false;
                })
            })
        })(jQuery)
    </script>
    
    Vào trong function.php của themes để nhận hành động và xử lý dữ liệu
    PHP:
    add_action'wp_ajax_itseovnthongbao''itseovnthongbao_init' );
    add_action'wp_ajax_nopriv_itseovnthongbao''itseovnthongbao_init' );
    function 
    itseovnthongbao_init() {
        
    $htmlrs "Nội dung trả về, thông báo kết nối chạy Ajax thành công, giá trị nhận được là: ".$_POST['itemvalue'];
        
    //xử lý dữ liệu gì đó ở đây
        
    wp_send_json_success($htmlrs);
        die();
    //bat buoc phai co khi ket thuc
    }
    Như vậy là xong.

    Cách 2: Chèn dạng File .js

    Cách này giúp bạn dễ dàng quản lý dữ liệu và chuyên nghiệp hơn.

    Đầu tiên bạn tạo 1 file itseovnajax.js và bỏ hết nội dung sau vào, và tải file này vào thư mục /themes/js/itseovnajax.js trên hosting.
    HTML:
    (function ($) {
    
        $(document).ready(function () {
            $('.buttonloadajax').on('click', function () {
                jQuery.post(
                    ajax_obj.ajax_url,
                    {
                        'action': 'itseovnthongbao',
                        'itemvalue' : 'itseovn.com',
                        nonce : ajax_obj.smart_nonce
                    },
                    function (response) {
                        $(".contentmain").append(response.data);
                    }
                );
            });
        });
    }) (jQuery);
    
    Sau đó vào function.php của themes chèn code sau vào:
    PHP:
    //khai báo file mới tạo tên itseovnajax.js cho wordpress cho vào web
    function itseovn_ajax_script() {
        
    wp_enqueue_script('itseovn_ajax'get_stylesheet_directory_uri() . '/js/itseovnajax.js', array(), '1.0.0'true );
        
    wp_localize_script'itseovn_ajax''ajax_obj',
            array( 
    'ajax_url' => admin_url'admin-ajax.php' ), 'smart_nonce' => wp_create_nonce'itseovnajax-nonce' )  ) );
    }
    //lắng nghe action khi có hành động người dùng ấn
    add_action('wp_ajax_itseovnthongbao''itseovnthongbao');
    add_action('wp_ajax_nopriv_itseovnthongbao''itseovnthongbao');

    function 
    itseovnthongbao(){
      
    //kiển tra xem
      
    $nonce $_POST['nonce'];
      if ( ! 
    wp_verify_nonce$nonce'itseovnajax-nonce' ) ){
          echo 
    '{ "code" : "errors"}';
          die ();
      }
      
    $htmlrs "Nội dung trả về, thông báo kết nối chạy Ajax thành công, giá trị nhận được là: ".$_POST['itemvalue'];
      
    //xử lý dữ liệu gì đó ở đây
      
    wp_send_json_success($htmlrs);
      die();
    //bat buoc phai co khi ket thuc
     
    }
    Như vậy là xong, bạn test và kiểm tra thử nhé, chúc các bạn thành công.
     
    Cảm ơn đã xem bài:

    Gọi sử dụng Ajax trong Wordpress vô cùng đơn giản ai cũng làm được



Like và Share ủng hộ ITSEOVN