Thứ Năm, 24 tháng 12, 2015

Ajax 2

12/24/2015 08:58:00 SA    No comments
Untitled Document

Bài 02: Tìm hiểu Jquery Ajax
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 10-08-2014 - Chuyên mục: PHP - View: 10713
Download Demo
Ở bài trước chúng ta đã làm một ứng dụng nho nhỏ với Ajax bằng Javascript thuần, nhưng như tôi đã nói thường chúng ta sử dụng những thư viện JS có sẵn như Jquery để thực hiện sẽ tiện lợi và ít có lỗi hơn, support đầy đủ cho tất cả các Browser mà chúng ta không mất công check nó.
Để 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:
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ề';

?>

Với 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ề, 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.

0 nhận xét:

Đăng nhận xét