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

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.