HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Cách sử dụng jQuery Ajax

Ajax – “Asynchronous JavaScript and XML” – là một bộ công cụ cho phép load dữ liệu từ server để xử lý một tác vụ hay yêu cầu mà không cần tải lại trang web.

Ajax được ứng dụng rất nhiều trong lập trình web.
Hiện nay có nhiều thư viện javascript như jQuery hay Angular đều hỗ trợ kỹ thuật này nhằm giúp chúng ta thao tác dễ dàng hơn.
Bài viết này sẽ hướng dẫn mọi người sử dụng kĩ thuật Ajax bằng thư viện jQuery.

 

Để sử dụng jQuery Ajax, đầu tiên chúng ta cần nhúng thư viện của jQuery vào trang. Các bạn có thể lấy thư viện mới nhất ở https://developers.google.com/speed/libraries/

 

Cùng tham khảo ví dụ dưới đây :

 

Nội dung trong file demo_ajax.php

 

 

Như ta thấy nguyên lý hoạt động của Ajax khá đơn giản.

Khi ta bấm vào Button, Ajax sẽ tự động liên kết tới file demo_ajax.php , nhận kết quả từ file này. Và trả kết quả đó vào 1 đối tượng là id result_here mà không cần tải lại trang.

Tải source ví dụ này ở đây.

 

 

Ở ví dụ trên, chúng ta chỉ mới nhận dữ liệu từ file Php, bây giờ mình sẽ thêm một ví dụ nâng cao hơn, bằng cách truyền tham số qua file Php, sau đó xử lý và trả về lại kết quả.

 

Và trong file demo_ajax.php

 

Ở ví dụ này, ta thấy

Khi chưa chọn danh mục thì phần sản phẩm không có gì cả.

Khi chọn 1 danh mục, hàm change() sẽ lấy giá trị của select khi có tác động vào nó.

Tiếp tục truyền tham số vừa lấy qua file demo_ajax.php, file này làm nhiệm vụ so sánh để chọn ra kết quả phù hợp.

Cuối cùng trả kết quả về select sản phẩm rất nhanh mà không cần tải lại trang.

Tải source ví dụ này ở đây

 

Bạn có thắc mắc vui lòng để lại bình luận, nếu thấy bài viết hay hãy chia sẻ với mọi người nhé.

 

Tags: ,

Leave a comment