Sử dụng Ajax trong wordpress
Trong bài này chúng ta sẽ đi làm 1 ví dụ đơn giản nhất về sử dụng ajax trong wordpress để load dữ liệu nhé.
Có thể bạn quan tâm
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.
Nội dung chính
- 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
- Ví dụ thực tế
- 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
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 Ajax
Cái nhìn khái quát
Vậy luồng của ajax trong wordpress như nà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ề
Chuẩn bị kiến 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ôi
- Đọc bài này trên codex cũng như ví dụ của nó.
- Tìm hiểu 2 action wp_ajax_ và wp_ajax_nopriv_
- Tối thiểu biết về Jquery
Ví dụ thực tế
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ư sau
<?php get_header();?> <a href="#" class="click_popup">Thông báo</a> <?php get_footer();?>
Đ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, html
<script type="text/javascript"> (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 : '<?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: "thongbao", //Tên action website : 'abweb.vn',//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) </script>Tổng hợp lại file index.php đầy đủ ta có như sau
<?php get_header();?> <a href="#" class="click_popup">Thông báo</a> <script type="text/javascript"> (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 : '<?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: "thongbao", //Tên action website : 'abweb.vn',//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) </script> <?php get_footer();?>Đoạn PHP xử lý dữ liệu và trả về giá trị. Code trong 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 }Giải thích 1 chút về hàm trên:
- Tên action ở đây là thongbao
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 - Do js để dạng dữ liệu là 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ùy vào phương thức truyền biến mà ta nhận được giá trị từ bên ngoài. Như ví dụ ta có $_POST[‘website]
Vậy là xong rồi. Bây giờ bạn click vào chữ “Thông báo” sẽ alert lên “Chào mừng bạn đến với abweb.vn”
Ví dụ lấy 5 bài viết mới nhất bằng ajax
Đoạn code html và js viết trong index.php
Kho plugin của tôi
<?php get_header();?> <div class="loadpost_result"></div> <a href="#" class="click_loadpost">Tải 5 bài mới nhất</a> <script type="text/javascript"> (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 : '<?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: "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) </script> <?php get_footer();?>Đoạn code trong functions.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 '<ul>'; while($post_new->have_posts()):$post_new->the_post(); echo '<li>'.get_the_title().'</li>'; endwhile; echo '</ul>'; 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 }Bây giờ khi đã làm xong bạn click vào chữ “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
Chúc các bạn thành công ^^
Tạo website chuyên nghiệp chỉ với 2s
Danh mục bài viết
Bài viết mới
