Hướng dẫn ajax call wordpress function - ajax gọi hàm wordpress

Có thể bạn quan tâm

• Giải quyết vấn đề đòi tài khoản FTP khi thêm plugin cho wordpress
• Thêm dashboard widgets
• Woocommerce price filter – Lọc sản phẩm theo khoảng giá
• Code phân trang wordpress
• Hiển thị comment form ra ngoài trang chủ | Display comment form on index page

Trong bài này chúng ta sẽ đi tìm hiểu cách thức hoạt động của ajax trong wordpress để tải và đọc dữ liệu từ backend và frontend. Qua bài này các bạn sẽ hiểu Ajax trong WordPress hoạt động ra sao. Cách truyền và nhận dữ liệu như nào cho đúng.ajax trong wordpress để tải và đọc dữ liệu từ backend và frontend. Qua bài này các bạn sẽ hiểu Ajax trong WordPress hoạt động ra sao. Cách truyền và nhận dữ liệu như nào cho đúng.

Thông báo

Khi nào dùng ajax? Khi bạn muốn thực hiện 1 hành động gì đó mà không muốn tải lại trang web thì sử dụng Ajax

    [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 : '', //Đườ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 : 'levantoan.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]

Vậy luồng của ajax trong wordpress như nào?index.php đầy đủ ta có như sau

Thông báo

    [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 : '', //Đườ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 : 'levantoan.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]

Từ Jquery [Ajax] truyền tham số vào xử lý thông qua wp_ajax_ và wp_ajax_nopriv_. Sau đó bên PHP xử lý xong sẽ trả kết quả về lại Js và từ đó mình sẽ thực hiện hành động dựa trên kết quả trả vềfunctions.php nha

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
}

Để tìm hiểu và làm được thì các bạn cần:

• Mẫu website nổi bật của tôithongbao
  Vậy nên sẽ viết wp_ajax_thongbao và wp_ajax_nopriv_thongbao
  Trong đó: wp_ajax_thongbao: chỉ user đã nhập với có thể thực hiện action thongbao
  wp_ajax_nopriv_thongbao: Cho tất cả mọi người chưa login đều có thể thực hiện action thongbao
• Đọc bài này trên codex cũng như ví dụ của nó.json vì thế phải sử dụng json_encode trước khi trả dữ liệu ra ngoài. Trong WP có wp_send_json_success[] và wp_send_json_error[] hỗ trợ điều đó.
• Tìm hiểu 2 action wp_ajax_ và wp_ajax_nopriv_$_POST[‘website]

Tối thiểu biết về Jquery“Thông báo” sẽ alert lên “Chào mừng bạn đến với levantoan.com”

Ví dụ đơn giản như sau: Click vào chữ “Thông báo” thì sẽ hiện thông báo [dạng alert] chứa kết quả trả về khi truyền 1 biến và xử lý

Đoạn html cơ bản trong file index.php như sauindex.php

Tải 5 bài mới nhất

    [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 : '', //Đườ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]

Đoạn js truyền dữ liệu vào php để xử lý như sau. Có thể viết js ra file riêng hoặc viết trực tiếp trên file php, htmlfunctions.php để xử lý 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 '
';
            while[$post_new->have_posts[]]:$post_new->the_post[];
                echo '
'.get_the_title[].'
';
            endwhile;
        echo '
';
    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
}

Tổng hợp lại file index.php đầy đủ ta có như sau“Tải 5 bài mới nhất” sẽ load 5 bài mới nhất vào div có class loadpost_result bằng ajax

Đoạn PHP xử lý dữ liệu và trả về giá trị. Code trong functions.php nha