Search cha con trong wordpress sử dụng ajax

Search cha con trong wordpress sử dụng ajax

Ngày 22 - 03 - 2020 - Tại chuyên mục: Wordpress - Lượt xem: 15861

Ở bài hôm trước mình đã hướng dẫn cho các bạn search cha con trong wordpress theo các thông thường. Nhưng cách đó chỉ phù hợp cho các website có dữ liệu nhỏ và vừa, các website dữ liệu lớn và phần cấp sâu thì dễ bị TOANG 😀

Vì thế hôm nay mình sẽ hướng dẫn cho các bạn cách cũng search cha con nhưng sẽ dùng ajax.

Search cha con trong wordpress sử dụng ajax

Tạo form search cha con html

Cũng giống như bài trước cấu trúc form ở bài này cũng giống hoàn toàn. Mình sẽ copy lại để các bạn dễ theo dõi nha.

Các bạn copy đoạn code này vào khu vực cần hiển thị form search nha. Đoạn code trên chỉ mới là html chưa có giao diện các bạn về thêm css vào để cho giao diện phù hợp nha.

Code chức năng chọn thằng cha show thằng con bằng ajax

Nếu các bạn có đọc qua bài viết ajax trong wordpress sẽ biết để sử dụng ajax chúng ta cần phải xử lý 2 phần: Phần front endphần backend

Xử lý phần frontend jquery

Chèn đoạn code này vào file footer.php của theme đang dùng nha.

Đoạn code trên chúng ta bắt sự kiện khi thay đổi Quận/Huyện thì sẽ gọi 1 cái ajax gởi lên phía backend 2 nội dung đó là: action và slug

Sau đó nhận dữ liệu data về add vào select Xã/Phường.

Lưu ý: Bạn nào trong dự án có chứa khai báo jquery rồi thì xóa dòng đầu tiên đi nha

Xử lý phần backend search cha con

Các bạn chèn đoạn code sau vào file functions.php của theme đang sử dung nha.

Đoạn code trên thực hiện chức năng nhận dữ liệu bằng phương thức POST, sau đó get những giá trị con cuả nó và trả kết quả về cho phía front end.

Như vậy là chúng ta đã thực hiện xong việc chọn thằng cha và show thằng con. Việc bây giờ là xử lý đoạn search trên nữa là xong

Xử lý dữ liệu search

Phần này cũng tương tự chức năng của bài trước, mình sẽ code cho các bạn dễ theo dõi nhé.

Chèn đoạn code này vào file search.php của theme đang dùng nha.

Tổng kết:

Hôm nay mình đã hướng dẫn cho bạn cách để search cha con sử dụng ajax trong wordpress. Hi vọng mình đã giúp bạn một phần nào trong quá trình lập trình theme.

Chào thân ái và quyết thắng.

À các bạn có thể ghé site học wordpress để ủng hộ mình nha 🙂

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

7
AVT