1. Khi nào cần load dữ liệu từ page khác vào 1 Div.
Bài toán đặt ra như thế này. Bạn có 1 page
Danh sách sinh viên bao gồm:
+ Hiển thị danh sách sinh viên
+ Phân trang
+ Search sinh viên
Khi người dùng gõ vào tên sinh viên và nhấn nút search. Sự khác nhau sẽ thế nào đối với 1 page dùng Ajax và 1 page không dùng?
Trả lời:
+ Đối với page không dùng Ajax thì bạn phải dùng Form submit. Như vậy Page sẽ bị reaload lại, rất khó chịu cho người dùng.
+ Nếu dùng Ajax thì page sẽ không bị reaload. Thao tác của người dùng sẽ mượt mà hơn rất nhiều.
2. Cách thức thực hiện như thế nào.
Include tất cả Jquery cần thiết vào. Như mình đã giới thiệu ở bài trước.
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
Viết 1 page ListSinhVien.html chứa danh sách sinh viên. Code của page này như sau:
<table> <tr> <th>Id</th> <th>Ten</th> <th>Lop</th> <th>Action</th> </tr> <tr> <td>1</td> <td>Js</td> <td>12</td> <td> <a href="#">Delete</a> </td> </tr> <tr> <td>1</td> <td>C#</td> <td>12</td> <td> <a href="#">Delete</a> </td> </tr> <tr> <td>1</td> <td>Asp.net</td> <td>12</td> <td> <a href="#">Delete</a> </td> </tr> </table> <span>This is ListSinhVien.html page</span>
Cách giải bài toán thứ nhất “Hiển thị danh sách sinh viên”:
- Xây dựng 1 trang Quản lý sinh viên.
- Có 1 button, khi click vào sẽ get List sinh viên về và show cho người dùng mà không cần phải Refresh page. (Đây là lúc cần dùng Ajax)
Viết 1 page QuanLySinhVien.html
Nội dung của page này sẽ chứa 1 Div danh sách sinh viên. Việc cần làm của chúng ta là load List sinh viên từ Page ListSinhVien.html vào Div này khi ta nhấn button LoadData.
<body> <h1>List Sinh Vien</h1> <a href="#" onclick="GetSinhVien(); return false;">LoadData</a> <div id="divSinhVien" style="min-width:300px; min-height:300px; border:1px solid green;"></div> </body>
Viết Javascript cho sự kiện click button LoadData
<script>
function GetSinhVien(){
var url = 'ListSinhVien.html';
$.ajax({
url: url,
data: null,
success: function(data){
$("#divSinhVien").html(data);
}
});
}
</script>
Code cho page QuanLySinhVien.html hoàn chỉnh.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordpress GUI</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style>
table tr th,
table tr td{
padding:5px;
border:1px solid;
}
</style>
<script>
function GetSinhVien(){
var url = 'ListSinhVien.html';
$.ajax({
url: url,
data: null,
success: function(data){
$("#divSinhVien").html(data);
}
});
}
</script>
</head>
<body>
<h1>List Sinh Vien</h1>
<a href="#" onclick="GetSinhVien(); return false;">LoadData</a>
<div id="divSinhVien" style="min-width:300px; min-height:300px; border:1px solid green;"></div>
</body>
</html>
Lưu ý: Các bạn phải dùng Wamp/Xamp giả lập để chạy Demo này nhé. Nếu không sẽ lỗi.
Kết quả cuối cùng
