Ajax là một kỹ thuật khá phổ biến trong lập trình web. Đối với bản thân mình khi mới bắt đầu lập trình wordpress thật sự là rất sợ ajax, không biết vì lý do chi mà cứ đụng đến ajax mình lại chuyển hướng tìm phương án khác hoặc nhờ người khác làm 😀
Nhưng cuối cùng mình cũng không thể tránh mãi được, mình bắt đầu tìm hiểu và thấy ajax không phải là thứ chi đó kinh khủng như mình tưởng tượng và chỉ mất 1 tuần mình đã tự xây được những chức năng mượt mà nhờ ajax. Bài viết hôm nay mình sẽ hướng dẫn cho các bạn cách sử dung ajax trong wordpress một cách đơn giản nhất.
Ajax là cái qq gì ?
Ajax là một kỹ thuật trong javaScript, Ajax giúp việc truyền dữ liệu từ backend ra frontend hoặc ngược lại mà không cần load trang. Ví dụ như submit form mà không load lại trang (Contact form 7).
Trên blog của mình các bạn để ý thấy phần comment cho bài viết cũng sumbit form mà không load lại trang, hoặc phần tìm kiếm của website mình nó cũng tự động load những kết quả khi các bạn đánh từ khoá… Tất cả những chức năng đó mình đang sử dụng ajax.
Hướng dẫn ajax trong wordpress
Để hiểu và làm được ajax trong wordpress bạn cần có kiến thức cơ bản về javascript, jquery và một tý kiến thức về lập trình theme wordpress nha!.
Để các bạn dễ hình dung và thực hành, mình sẽ đưa ra một ví dụ cụ thể như sau: Trên giao diện website sẽ hiện 1 button, khi click vào button đó nó sẽ hiện ra 5 bài viết ngẫu nhiên, mỗi lần click lại button đó nó sẽ hiện ra 5 bài khác và tất nhiên nó sẽ ko load lại trang.
Bay giờ mình sẽ chia nội dung kiến thức này ra làm 2 phần:
- Phần front end sẽ gởi dữ liệu đi, nhận dữ liệu từ server và hiển thị dữ liệu.
- Phần back end sẽ nhận dữ liệu, xử lý dữ liệu và trả dữ liệu về cho front end.
Phía front end:
– Hiển thị button để click
1 2 3 4 |
<div class="content-widget"> <button class="call-ajax">Bài viết ngẫu nhiên</button> <div class="display-post"></div> </div> |
Trong đó <div class=”display-post”></div> chứa nội dung trả về từ server.
– Gởi dữ liệu cho server và nhận giá trị trả về!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function(){ $('.call-ajax').click(function(){ // Khi click vào button thì sẽ gọi hàm ajax $.ajax({ // Hàm ajax type : "post", //Phương thức truyền post hoặc get dataType : "html", //Dạng dữ liệu trả về xml, json, script, or html url : '<?php echo admin_url('admin-ajax.php');?>', // Nơi xử lý dữ liệu data : { action: "random", //Tên action, dữ liệu gởi lên cho server }, beforeSend: function(){ // Có thể thực hiện công việc load hình ảnh quay quay trước khi đổ dữ liệu ra }, success: function(response) { //Làm gì đó khi dữ liệu đã được xử lý $('.display-post').html(response); // Đổ dữ liệu trả về vào thẻ <div class="display-post"></div> }, error: function( jqXHR, textStatus, errorThrown ){ //Làm gì đó khi có lỗi xảy ra console.log( 'The following error occured: ' + textStatus, errorThrown ); } }); }); }); |
Thông thường đoạn code được nằm ở file footer.php của theme.
Đoạn code trên thì frontend sẽ gởi cho backend dữ liệu là data. Dữ liệu của ‘data’ được gởi dưới dạng key và value nhé. Chúng ta có thể gởi một lần nhiều giá trị lên cho server xử lý. Trong trường hợp ví dụ này mình gởi lên một action có tên là ‘random‘.
Phía back end:
Thêm đoạn code này trong file functions.php của theme nhé!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php add_action('wp_ajax_random', 'random_function'); add_action('wp_ajax_nopriv_random', 'random_function'); function random_function() { echo '<ul>'; $getposts = new WP_query(); $getposts->query('post_status=publish&showposts=5&orderby=rand'); global $wp_query; $wp_query->in_the_loop = true; while ($getposts->have_posts()) : $getposts->the_post(); echo '<li>'; echo '<a href="'.get_the_permalink().'">'.get_the_title().'</a>'; echo '</li>'; endwhile; wp_reset_postdata(); echo '</ul>'; die(); } ?> |
Giải thích:
- wp_ajax_{tên action} và wp_ajax_nopriv_{tên action}: 2 cái này là 2 action dùng để thực thực thì ajax trong wordpress. Ở phía front end mình gởi lên action là “random” vì thế ở trường hợp này mình phải dùng: wp_ajax_random, wp_ajax_nopriv_random. Bạn có thể đọc tài liệu về các action của ajax trong wordpress tại đây
- random_function là hàm dùng để xử lý dữ liệu. Hàm này sẽ được móc vào 2 action trên => add_action(‘wp_ajax_random’, ‘random_function’); và add_action(‘wp_ajax_nopriv_random’, ‘random_function’);
Sau khi đã code xong chức năng, các bạn ra ngoài giao diện test nếu kết quả được như phía dưới là thành công:
1 2 3 4 5 6 7 8 9 |
<div class="display-post"> <ul> <li><a href="link">text text</li> <li><a href="link">text text</li> <li><a href="link">text text</li> <li><a href="link">text text</li> <li><a href="link">text text</li> </ul> </div> |
Để hiểu hơn các bạn có thể xem video bên dưới:
Tóm lại:
Hôm nay mình đã hướng dẫn cho bạn cơn bản về ajax trong wordpress, hy vọng nó sẽ giúp ích cho các bạn trong những dự án sắp tới. Sau bài viết này mình sẽ có khoản 3 4 bài viết thực hành ajax trong wordpress các bạn nhớ chú ý theo dõi nhé.
Cảm ơn các bạn đã ghé thăm blog. Chúc các bạn thành công!
Võ Thành Đạthay ghê
Thích Trả lời 5 năm trước
nguyễn tiến dũngfile admin-ajax.php viết ra hay có có sẵn nhỉ mình chưa hiểu
Thích Trả lời 5 năm trước
Huy KiraFile admin-ajax.php có sẵn trong code rồi bạn!
Thích Trả lời 5 năm trước
Giang Lê HoàngCảm ơn bạn!
Thích Trả lời 4 năm trước
Giang Lê Hoàngurl trong code AJAX bạn có lỗi nhé, ai ko biết copy sẽ ko xài đc :D url : '<?php echo admin_url('admin-ajax.php');?>', // Nơi xử lý dữ liệu
Thích Trả lời 4 năm trước
Nguyễn bá vĩnhbạn nói rõ lỗi ở đâu được không. mình làm theo cũng thấy báo lỗi
Thích Trả lời 4 năm trước
Quốc Bìnhnghe Anh giới thiệu nên Em test thử coi có bị load lại form k
Thích Trả lời 4 năm trước
Huy KiraKết quả có bị load form không =))
Thích Trả lời 4 năm trước
Danhbạn cho mình hỏi nếu mình tạo một table trong database của wordpress thì truy vấn như thế nào
Thích Trả lời 4 năm trước
Huy KiraBạn dùng lớp wpdb của wordpress để query nha bạn! Mình sắp có bài hướng dẫn với chủ đề này!
Thích Trả lời 4 năm trước
tradecoinvietcho mình hỏi nếu cache thì phải xử lý ajax ra sao bạn ơi
Thích Trả lời 4 năm trước
iphonetrabaohanhcảm ơn bạn
Thích Trả lời 3 năm trước
Soi Cau MBcảm ơn bạn
Thích Trả lời 3 năm trước
Hoàng Kiên TrungCảm ơn bạn
Thích Trả lời 3 năm trước
DVPThanks you ad !
Thích Trả lời 3 năm trước
Văn ToảnLàm sao để avatar của mỗi người khác nhau khi bình luận mà không cần đăng nhập như này nhỉ?
Thích Trả lời 2 năm trước
Keirafile admin-ajax.php ko có sẵn trong project bạn ơi, mình dùng phiên bản 5.7
Thích Trả lời 2 năm trước
Huy KiraSao lại không có, có thể bạn khai báo sai đường dẫn. Chứ nó vẫn có ở đó nha :D
Thích Trả lời 2 năm trước
Keiraà cám ơn bạn nhiều nha, mình làm đc rồi :)
Thích Trả lời 2 năm trước
Kakađường dẫn đó làm sao lấy trong file js vậy thím, tức là viết trong file js thì chỗ viết lại thế nào
Thích Trả lời 2 năm trước
Keira_Momhọc hành kiểu này về nhà tao đánh chết
Thích Trả lời 2 năm trước
Tungcho mình hỏi nếu làm một trang web bán hàng thì có nên sử dụng ajax hay không vậy bạn? tks bạn
Thích Trả lời 2 năm trước
Huy KiraCái này tùy vào tính năng web bạn có cần hay không thôi. Dùng đc vẫn oke nha bạn
Thích Trả lời 2 năm trước
Hoàng DuyE có cái data như này data : { action: "random", name: "abc" } ở hàm wp_ajax_random thì mình móc cái name ra kiểu gì ạ
Thích Trả lời 7 tháng trước
Leo$name = $_POST['name'];
Thích Trả lời 7 tháng trước