Viết Ajax trên file javascript trong wordpress

Khi tham khảo các nguồn thông tin tìm kiếm trên google về ajax trong wordpress, hầu như tất cả chúng ta đều được hướng dẫn viết chung với file PHP. Tuy nhiên khi vào việc, viết plugin ít khi chúng ta sử dụng thẻ script rồi chèn vào cuối trang như các ví dụ mà cần viết ra một file js riêng. Bài viết này sẽ hướng dẫn các bạn Viết Ajax trên file javascript.

Khai báo

add_action( 'wp_enqueue_scripts', 'ajax_scripts' );
function ajax_scripts() {
   wp_enqueue_script( 'ajax_custom_script', get_stylesheet_directory_uri() . '/includes/ajax.js', array('jquery') );
   wp_localize_script( 'ajax_custom_script', 'ajax_in_folder', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}

Các bạn cần gắn linkfile js như thường lệ. Ngoài ra cần biết thêm một action : wp_localize_script dùng để truyến biến từ php đến javascrip.Trong đoạn code bên dưới ‘ajajax_in_folder’ là tên biến , array( ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ) là mảng truyền vào.
Xử lý file ajax.js
jQuery(document).ready(function($) {    
       $('#get-data-button').click(function(){
          $.ajax({
            type : "post",
            dataType : "html",
            url : ajax_in_folder.ajax,
            data : {
                action: "ajax_in_folder",
                text: "trả về data thành công"
            },
            context: this,
            success: function(response) { 
                if(response.success) {
                     alert(response.data);
                }
                else {
                     alert('Có lỗi rồi');
                }
            },
        });
       })
});

Xử lý dữ liệu gửi lên
add_action( 'wp_ajax_ajax_in_folder', 'ajax_in_folder_init' );
add_action( 'wp_ajax_nopriv_ajax_in_folder', 'ajax_in_folder_init' );
function ajax_in_folder_init() {

    $text= (isset($_POST['text']))?esc_attr($_POST['text']) : '';
    wp_send_json_success('Chào mừng bạn đến với '.$text);
 
    die();
}

Tham khảo: https://codex.wordpress.org/AJAX_in_Plugins