Nội Dung Chính
[ VIDEO TUT ]
- Đang cập 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:
1 2 3 | <?php echo 'Vietpro Acdemy'; ?> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> $(document).ready(function(e) { $('#but').click(function(){ $.get('demo.php', function(data, status){ alert(data+'\n'+status); }); }); }); </script> <button id="but">Action</button> <p id="output"></p> |
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
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:
1 2 3 | <?php echo 'Name: '.$_POST['name'].' - Site: '.$_POST['site']; ?> |
Tiếp đến các bạn cập nhật lại nội dung code của file index.html như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(document).ready(function(e) { $('#but').click(function(){ $.post('demo.php', { 'name':'Vietpro Academy', 'site':'www.vietpro.edu.vn' }, function(data, status){ alert(data+'\n'+status); }); }); }); |
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:
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
