jQuery ajax giúp chúng ta đơn giản hóa quá trình thực thi. Sau đây là một vài minh họa về tính tiện dụng của JQuery ajax.
Cú pháp
jQuery.ajax({
type:"POST", //Phương thức gửi request là POST hoặc GET
data:"id=12&name=abc", //tham số gửi kèm
dataType:"xml", //kiểu dữ liệu trả về, mặc định là text
url:"/login/servletLogin", //Đường dẫn tới nơi xử lý request ajax
success: function (){ //hàm gọi về khi thực hiện thành công
// mã lệnh
}
});Ví dụ 1: Sử dụng HTML tạo một ví dụ đơn giản với jQuery ajax
- Tạo một thư mục(ở đây tạm gọi là thư mục VD).
- Vào thư mục VD tạo một file index.html có nội dung như sau
- Tiếp tục tạo file ajax.html có nội dung như sau
- Mở file index.html bằng trình duyệt bất kỳ click vào button ajax bạn sẽ thấy toàn bộ nội dung của file ajax.html được lấy về trang index.html.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#ajaxButton").click(function(){
jQuery.ajax({
type:"POST",
url:"ajax.html",
success:function(html){
jQuery("#responseDiv").html(html);
}
});
});
});
</script>
</head>
<body>
<div>
<input type="button" value="ajax" id="ajaxButton"/>
</div>
<div id="responseDiv">
</div>
</body>
</html><style>
#sampleTable{
border-collapse:collapse;
}
#sampleTable td{
border: 1px solid black;
width:100px;
}
</style>
<table id="sampleTable">
<tr>
<td>Name</td>
<td>Year</td>
</tr>
<tr>
<td>Van A</td>
<td>1982</td>
</tr>
</table>Ví dụ 2: Dùng PHP tạo một ví dụ đơn giản với jQuery ajax.
- Cài đặt ứng dụng chạy apache như Xampp hoặc Wamp. Start ứng dụng.
- Tạo thư mục với tên là sample trong(thư mục htdocs đối với Xampp và www đối với Wamp)
- Trong thư mục sample tạo file index.php có nội dung như sau:
- Tạo tiếp file ajax.php trong thư mục sampe với nội dung như sau
- Bây giờ bạn mở một trình duyệt web lên(IE hoặc firefox) lên gõ vào thanh địa chỉ như sau: localhost/sample/
- Bạn điền vào hai field Name và Year nhấn button ajax bạn sẽ thấy câu chào giống như hình dưới.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#ajaxButton").click(function(){
jQuery.ajax({
type:"POST",
url:"ajax.php", //goi toi file ajax.php
data:"name="+jQuery("#name").val()+"&year="+jQuery("#year").val(),//du lieu gui di
success:function(html){
jQuery("#responseDiv").html(html);
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>Year:</td>
<td><input type="text" id="year"/></td>
</tr>
</table>
<div>
<input type="button" value="ajax" id="ajaxButton"/>
</div>
<div id="responseDiv">
</div>
</body>
</html><?php
$name = $_REQUEST['name'];//Lay parameter tu request
$year = $_REQUEST['year'];//Lay parameter tu request
echo "<div>".$name." sinh nam ".$year."</div>";//Noi dung tra ve
?>
Chào bạn, bài này rất căn bản. Nó rất bổ ích cho tui. Nếu có cài hay hơn, post lên nha.
Trả lờiXóaMinh Ký
email; ky@minhnhan.vn
Nhận xét này đã bị tác giả xóa.
XóaCảm ơn bạn vì bài viết này. Mình đang tìm hiểu về Jquery và gặp chút khó khăn với việc gửi thông tin từ Form lên Server. Bạn đã giúp mình. Bạn có bài viết nào hay nữa Post lên cho mọi người học hỏi nha.
Trả lờiXóangon ngon ngon!!! thanks nhá
Trả lờiXóagood
Trả lờiXóathat la can ban. nhung good
Trả lờiXóaThank bạn rất nhìu :D
Trả lờiXóaSao khi tui down bản jquery đó về cài offline và bỏ src="http://code.jquery.com/jquery-1.4.2.js"> đi thì nó lai không chạy vậy.
Trả lờiXóaChào bạn. Cho mình hỏi, trong ví dụ trên là mình dùng jquery ajax load toàn bộ một nội dung ở external page, bạn có thể chỉ cách cho mình load một phần của trang đó được không?. Ví dụ load thẻ div có class là .menu chẳng hạn.
Trả lờiXóaRất mong sớm nhận được hồi âm
Thanks!
lấy được hết nội dung rồi thì lấy từng phần rất dễ mà bạn, nắm vững jQuery là xong hết ^^
XóaNhận xét này đã bị tác giả xóa.
XóaQuá cơ bản, quá hay, thanks bạn rất nhiều.
Trả lờiXóatrên cả tuyệt vời mình mong sẽ có bài mới
Trả lờiXóacảm ơn bạn rất nhiều về bài viết này
Trả lờiXóacám ơn bạn. Mình đã đọc cả trang web của bạn. Thực sự rất hay. Cám ơn bạn rất nhiều. Hãy chia sẻ nhiều hơn nữa cho cộng đồng chúng tôi với bạn nhé, cám ơn bạn nhiều lắm
Trả lờiXóarất cám ơn bạn đã chia sẻ:
Trả lờiXóarất mong bạn có nhiều bài viết như thế này cho cộng đồng
thank bạn rất nhiều !!! Mong bạn giúp dùm làm thể nào để làm được cái menu ngang trượt như google plus .
Trả lờiXóacả nhà click giup em
Trả lờiXóahttp://nhasachviet.vn/
Làm sao cho ảnh di chuyển bằng ajax vậy
Trả lờiXóaAnh không viết ajax nữa ah? bùn thế
Trả lờiXóaCaesars Casino and Racetrack – 2021 New Jersey Gambling
Trả lờiXóaCaesars worrione Resort Casino dental implants & aprcasino Racetrack is the latest casino in New Jersey to undergo 토토 a comprehensive safety review. The casino is 바카라 사이트 owned by Caesars