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
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    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 dạng 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 vào 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:
    //load javascript cho web add them
    add_action('after_setup_theme''itseovn_theme_setup');
    if ( ! 
    function_exists'itseovn_theme_setup' ) ){
        function 
    itseovn_theme_setup(){
            
    add_action'wp_enqueue_scripts''itseovn_ajax_script');
        }
    }
    //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
     
    }

    Cách 3: Chèn dạng chi tiết giống cách 1


    Code cho vào header hay footer hay thân html của page cần chạy javascript.
    HTML:
    <script>
        (function($){
            $(document).ready(function(){
                //gọi ajax luu cookies
                $('.buttonloadajax').click(function(){
                    //alert(valuechoose);
                    $.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: "itseovnactionajax", //Tên action
                            itemvalue : "itseovn",//Biến truyền vào xử lý. $_POST['itemvalue']
                        },
                        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);
                                // window.location.href = "/products/";
                            }
                            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>
    
    Code chèn trong function.php của themes
    PHP:
    //lắng nghe action khi có hành động người dùng ấn
    add_action('wp_ajax_itseovnactionajax''itseovnactionajax_init');
    add_action('wp_ajax_nopriv_itseovnactionajax''itseovnactionajax_init');
    function 
    itseovnactionajax_init(){
      
    $itemvalue = (isset($_POST['itemvalue']))?esc_attr($_POST['itemvalue']) : '';
      
    //$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($itemvalue);
      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

    Last edited by a moderator: 30/10/23


Chủ để tương tự : Gọi sử
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Cách gọi sử dụng RESTful API Caresoft lấy đơn hàng Woocommerce Wordpress 20/4/21
Mã nguồn mở Wordpress Cách gọi sử dụng RESTful API Getfly lấy đơn hàng Woocommerce Wordpress 3/3/21
Mã nguồn mở Wordpress Cách gọi sử dụng RESTful API Caresoft trong wordpress chi tiết 18/1/21
Mã nguồn mở Wordpress Gọi Ajax trong wordpress như thế nào? 26/10/20
Mã nguồn mở Wordpress Subfolder domain website wordpress không nhận lỗi đường dẫn 3/11/23