Hướng dẫn ajax trong WordPress với sự kiện select change form

Hướng dẫn ajax trong WordPress với sự kiện select change form

Sử dụng ưu điểm của Ajax trong việc load dữ liệu mà không cần phải tải lại trang giúp bạn tạo nên những tính năng rất hữu ích trong website.Sau đây Sơn Web sẽ hướng dẫn bạn cách sử dụng ajax trong WordPress một cách đơn giản dễ hiểu nhất.

Cách sử dụng jQuery Ajax trong WordPress

Trước khi viết hướng dẫn , mình cũng tham khảo một số bài viết về cách sử dụng ajax trong WordPress khác trên mạng như:

Tuy nhiên 1 số bài hướng dẫn khá nhiều và phức tạp , sau đây mình đang làm chức năng tạo 2 select , 1 select trong form hiển thị danh sách quận huyện, và bắt sự kiện change của select sẽ get data phường xã tương ứng với quận huyện .Select 2 sẽ hiển thị danh sách phường xã tương ứng với quận huyện.

hướng dẫn ajax trong wordpress với select

hướng dẫn ajax trong wordpress với select

Kiến thức cơ bản khi khi sử dụng ajax trong WordPress

  • jquery cơ bản.
  • php cơ bản
  • WordPress cơ bản sử dụng wp_ajax_ & wp_ajax_nopriv_

Demo Code hiển thị select lấy danh sách phường xã ở sự kiện select change quận huyện

Bạn xem demo từ website http://batdongsancatminh.com/san-pham/dat-nen-sieu-re-vi-tri-duong-3-ra-le-van-viet-va-dinh-phong-phu/ , với form search bên sidebar chọn quận huyện , phường xã.

Bước 1: Hiện thị option danh sách quận huyện từ database

Code demo:

Ở đây mình tạo quận huyện là taxonomy.với slug là:list-countys, với get_terms là function() cùa WordPress để lấy data list taxonomy theo các tham số như trên. Bạn có thể tham khảo cách dùng get_terms từ WordPress tại đây: https://developer.wordpress.org/reference/functions/get_terms/
Ở đây mình sẽ bắt sự kiện khi người dùng click chọn 1 quận huyện thì sẽ gửi request tới server get data phường xã của quận huyện tương ứng ,mà server sẽ response lại ,

Bước 2: Sử dụng Ajax trong WordPress

Giải thích code: Ở đây select mình đặt id là : quan_huyen, dùng jquery bắt sự kiện change. Do mặc định ajax trong WordPress sẽ được xử lý trong wp-admin/admin-ajax.php, do đó trong script đặt biện url gửi server xử lý là đường dẫn tới file admin-ajax.php
Ajax trong WordPress cũng như php thuần.

  • kiểu dữ liệu gửi đi ở đây là post.
  • id_qh là id taxonomy sẽ gửi tới server
  • get_px_by_ajax là function sẽ xử lý tại server với yêu cầu người dùng khi thay đổi quận huyện

Get data phường xã theo id quận huyện từ phía server
Trong file functions.php bạn sẽ viết function get_px_by_ajax với add_action wp_ajax_get_px_by_ajax

Giải thích:
1. wp_ajax_get_px_by_ajax, wp_ajax_nopriv_get_px_by_ajax là hai hook dùng cho xử lý ajax với tiền tố mặc định wp_ajax và wp_ajax_nopriv , với người dùng không login và login
2. Ở đây mình tạo Phường Xã là taxonomy là con của quận huyện , nên truy vấn parent: là id_qh get từ người dùng gửi
3. Server sẽ trả về list các option cho selection phường xã.
4. Khi server response lại , thành công bạn xem lại jquery phía trên sẽ dùng phương thức :

để nhận data từ server phản hồi về.
Hi vọng bài này sẽ giúp bạn hiểu cách dùng select động với ajax trong WordPress

Share this post

Trả lời

Email của bạn sẽ không được hiển thị công khai.