jQuery Ajax (P.3)

0
268

[ VIDEO TUT ]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

1. Giới thiệu

Chào các bạn, nội dung của bài hướng dẫn hôm nay chúng ta cùng nhau đi tìm hiểu cách thức jQuery tương tác với các ngôn ngữ  phía máy chủ thông qua các phương thức $.post() và $.get() theo cơ chế Ajax

2. Phương thức $.get() trong jQuery

Cú pháp:

  • $.get(‘file_url’, function(data, status){});

Trong đó:

  • file_url: đường dẫn đến file xử lý phía máy chủ cần lấy dữ liệu
  • data: dữ liệu trong file xử lý phía máy chủ sẽ trả về tham số này
  • status: nhận giá trị là success khi tải dữ liệu thành công

Ví dụ:

Khởi tại file demo.php trên Server có nội dung code như sau:

Khởi tạo file index.html nằm ngang hàng với file demo.php trên Server và có nội dung code như sau:

Kết quả hiển thị trên trình duyệt web khi bạn chạy file index.html và click vào Button Action sẽ như sau

1

3. Phương thức $.post() trong jQuery

Cú pháp:

  • $.post(‘file_url’, {}, function(data, status){});

Trong đó:

  • file_url: đường dẫn đến file xử lý phía máy chủ cần lấy dữ liệu
  • {}: một đối tượng được truyền sang file xử lý phía máy chủ theo phương thức POST
  • data: dữ liệu trong file xử lý phía máy chủ sẽ trả về tham số này
  • status: nhận giá trị là success khi tải dữ liệu thành công

Ví dụ:

Cập nhật lại file demo.php ở ví dụ trước với nội dung code mới như sau:

Tiếp đến các bạn cập nhật lại nội dung code của file index.html như sau:

Bây giờ các bạn chạy file index.html trên Server và click Button Action thì sẽ thấy kết quả hiển thị trên trình duyệt web sẽ như sau:

2

Như vậy là qua hướng dẫn này, tôi đã hướng dẫn các bạn sử dụng jQuery để tương tác dữ liệu với Server thông qua có chế Ajax một cách khá đơn giản chứ không hề phức tạp như trước đây chúng ta code Ajax thuần Javascript nữa.

Trong thời gian tới, nếu sắp xếp được thời gian, tôi sẽ quay trở lại với các bạn về loạt bài jQuery – Ajax này, nhưng mà là xây dựng một ứng dụng thực tế để các bạn hiểu sâu hơn nữa về chủ đề này, các bạn nhớ đón xem nhé.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code

Các bạn tham khảo các bài học ajax khác tại đây.

Thầy Giáo Quốc Dân: Tuấn Hoàng

[Total: 2    Average: 3/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here