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.

Nội dung chính

1. Vì sao và khi nào thì sử dụng Ajax
2. Cái nhìn khái quát
3. Chuẩn bị kiến thức
4. Ví dụ thực tế
5. Ví dụ lấy danh sách 5 bài viết mới nhất

Vì sao và khi nào thì sử dụng Ajax

Cái nhìn khái quát

Chuẩn bị kiến thức

Cái nhìn khái quát

Chuẩn bị kiến thứcajax trong wordpress như nào?

Ví dụ thực tế

Chuẩn bị kiến thức

Ví dụ thực tế

Ví dụ lấy danh sách 5 bài viết mới nhất

• Ajax rất hay, nó giúp chúng ta có thể load dữ liệu mà không cần tải lại trang web. Nhờ đó mà có thể tăng tốc website, tiện dụng cho người dùng hơn rất nhiều. Vì vậy sử dụng ajax vào đúng chỗ sẽ giúp load trang nhanh hơn.
• 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 Ajaxwp_ajax_ và wp_ajax_nopriv_
• Vậy luồng của ajax trong wordpress như nào?

Ví dụ thực tế

Ví dụ lấy danh sách 5 bài viết mới nhất

Ajax rất hay, nó giúp chúng ta có thể load dữ liệu mà không cần tải lại trang web. Nhờ đó mà có thể tăng tốc website, tiện dụng cho người dùng hơn rất nhiều. Vì vậy sử dụng ajax vào đúng chỗ sẽ giúp load trang nhanh hơn.index.php như sau

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

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

Thông báo

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

Đ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