Tìm Hiểu Jquery Ajax - Jquery Căn Bản - Freetuts

Trang chủ » Thư Viện Ajax » Tìm Hiểu Jquery Ajax - Jquery Căn Bản - Freetuts

Có thể bạn quan tâm

Ở bài trước chúng ta đã làm một ứng dụng nho nhỏ với Ajax bằng Javascript nhưng như tôi đã nói thường thì chúng ta sử dụng những thư viện JS có sẵn như Jquery để thực hiện, bởi vì thư viện jQuery hỗ trợ đầy đủ cho tất cả các browser nên chúng ta không cần phải kiểm tra các điều kiện về Browser như bài trước nữa.

test php

banquyen pngBài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để các bạn dễ tiếp thì bài thì chúng ta sẽ thực hiện làm một ví dụ đơn giản tương tự như bài trước nhưng thay vì viết bằng Javascritp thuần thì chúng ta sử dụng jQuery. Để làm được bài này bạn phải biết cách sử dụng Jquery căn bản, biết một tí về Javascript và PHP nữa thì càng tốt nhé. Còn nếu chưa biết thì thì bạn nên ngừng đọc vì bài này không phù hợp với bạn.

1. Download thư viện jQuery

Bạn có thể lên trang chủ jquery để download bộ mới nhất.

2. Xây dựng các file trong ứng dụng

Tạo một project với tên là jquery_ajax, sau đó bạn tạo hai file index.php và result.php với nội dung như sau:

Bài viết này được đăng tại [free tuts .net]

File index.php:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script language="javascript"> function load_ajax(){ } </script> </head> <body> <div id="result"> Nội dung ajax sẽ được load ở đây </div> <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/> </body> </html>

File result.php:

<?php echo 'Đây là nội dung trả về'; ?>

Trong file index.php tôi có import một thư viện Jquery vào, đó là dòng:

<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

Và cũng tương tự như bài trước, tôi có tạo một button, một thẻ div#result để chứa nội dung Ajax trả về và một hàm load_ajax() để khi click vào button thì hàm này được kích hoạt.

3. Viết code jquery ajax

Bây giờ bạn thay đổi nội dung của hàm load_ajax() trong file index.php như sau:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <script language="javascript"> function load_ajax(){ $.ajax({ url : "result.php", type : "post", dataType:"text", data : { }, success : function (result){ $('#result').html(result); } }); } </script> </head> <body> <div id="result"> Nội dung ajax sẽ được load ở đây </div> <input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/> </body> </html>

Các bạn có thể so sánh với đoạn code Javascript ở bài tìm hiểu ajax là gì và thấy bài này ta sử dụng jquery nên code rất là ngắn. Bạn chạy file index.php lên và click vào button thì sẽ thấy kết quả hoàn toàn giống nhau.

4. Tìm hiểu các thuộc tính jquery ajax

Sau ví dụ trên có lẽ bạn đang thắc mắc những thuộc tính mà tôi truyền vào trong hàm ajax là gì? Để các bạn không phải mất công tìm tòi thì tôi sẽ giải thích luôn. Nhưng trước khi tìm hiểu vào thì tôi xin lưu ý với các bạn rằng trong bài này tôi chỉ giải thích những thuộc tính quan trọng bắt buộc có, còn những thuộc tính khác ta sẽ tìm hiểu dần dần ở những bài tiếp theo.

Khi viết ajax trong jquery thì ta có cú pháp như sau:

$.ajax(args);

Trong đó args là một đối tượng object gồm các thuộc tính cơ bản sau:

  • url: đường dẫn đến file lấy kết quả
  • type: một trong hai phương thức post hoặc get
  • dataType: kiểu dữ liệu trả về, có thể là json, xml, script hoặc text
  • success : là hàm xử lý kết quả trả về, nó có tham số lưu trữ kết quả trả về đó là result. Như trong ví dụ trên tôi đã xử lý kết quả trả về bằng cách đổ nó vào trong thẻ div#result

Đây là 4 thuộc tính mà các bạn học được trong bài này. Tới những bài tiếp theo ta sẽ học thêm được nhiều thuộc tính khác nữa.

5. Kết thúc bài học

Bài này chỉ mang tính chất giới thiệu về jQuery Ajax nên chưa có ví dụ demo cụ thể mà các bạn sẽ tìm hiểu các ví dụ thông qua những bài tiếp theo của serie này, hy vọng qua bài này bạn sẽ thích thú với kỹ thuật Ajax và áp dụng nó vào Project của các bạn.

Danh sách file tải về

Tên file tải về Pass giải nén
Tải bài học định dạng PDF freetuts.net hoặc gameportable.net

Từ khóa » Thư Viện Ajax