Tìm theo từ khóa

AJAX Là gì? Ví dụ dùng AJAX trong WordPress



Trước đây mình ít khi dụng đến AJAX và thường tránh dùng vì một phần vì thấy các câu lệnh có vẻ rất cao siêu và khó hiểu tuy nhiên khi tìm hiểu thực tế và thực hành thì thực ra nó không khó như vậy. Chỉ cần các bạn nắm rõ cấu trúc và cách dùng thì sẽ thấy AJAX rất đễ sử dụng và tiện lợi. Cùng codfe tìm hiểu AJAX Là gì? và ví dụ dùng AJAX trong WordPress nhé!

AJAX là gì?

AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML. AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web, hoàn toàn không reload lại toàn bộ trang. Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.

Lợi ích khi sử dụng AJAX

Trong định nghĩa trên ta thấy lợi ích lớn nhất của Ajax là sẽ thực hiện một thao tác thay đổi dữ liệu trên một phần giao diện website mà không phải load lại toàn bộ trang, nâng cao trải nghiệm người dùng.

Chúng ta sẽ thấy trong WordPress Ajax sẽ được sử dụng nhiều trong trang giỏ hàng và thanh toán của woocommerce, các thao tác thay đổi số lượng thì giá sẽ được cập nhật trực tiếp trên trang mà không cần phải load lại toàn bộ trang

Ví dụ về sử dung AJAX trong wordpress

Trong ví dụ này mình sẽ demo hàm Ajax cho nút “Thêm vào giỏ hàng” với nhiệm vụ: khi click sẽ thêm vào giỏ hàng một danh sách các sản phẩm (dạng combo sản phẩm)  đồng thời cập nhật trạng thái icon giỏ hàng.

Để sử dụng AJAX trong WordPress chúng ta cần thực hiện các bước như sau:

B1: HTML trên giao diện

B2: Khai báo:

Thường chúng ta sẽ khai báo file JS chứa code JS sử dụng Ajax và đường dẫn của file admin-ajax.php nhé. Trong ví dụ dưới sẽ khai báo file js tại vị trí /assets/js/myjs.js  trong theme con và dường dẫn đến file admin-ajax.php

B3: Phương thức Ajax

Trong ví dụ sau chúng ta sẽ tạo 1 phương thức Ajax (trong file myjs.js) lấy danh sách id của sản phẩm trong class=”cf_variation_id” truyền vào back end để xử lý. Trong ví dụ bên dưới đã có đầy đủ mô tả cho các hàm, trong đó chú ý biến ajax_url đã được khai báo trong B2

B4: Hàm xử lý các yêu cầu của Ajax (trong function.php)

Mình sẽ không giải thích nhiều vì đã ghi chú trong code. Chúc các bạn thành công nhé!

5/5 - (2 bình chọn)
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x