4880 fans
1036 reader
123 followers

Jquery AJAX Loading data when requested

Publish by: Mr. Nav
In category: jQuery
15 comments

Tutorial Details
Độ khó: Căn bản
Thời gian: 30 phút
File size: < 1 Mb
Yêu cầu: Căn bản PHP, Ajax

Có 6 bài viết trong series jQuery AjaxHiển thị

Chà, cũng lâu rồi không làm bài nào về Jquery AJAX nhỉ, hôm nay mình sẽ hướng dẫn các bạn sử dụng Jquery AJAX để tải dữ liệu khi người dùng yêu cầu.

Nếu bạn nào mới làm quen với Jquery AJAX thì các bạn hãy xem lại các bài viết trước của mình hướng dẫn cách sử dụng Jquery AJAX để load dữ liệu nhé.

Hình ảnh, database được đính kèm trong file download.

Xem Demo

Đối với những trang web bán hàng hiện đại nói riêng hay những trang web khác nói chung thì việc áp dụng công nghệ AJAX để tải dữ liệu từ server là rất cần thiết.

Khi bạn làm một trang web bán hàng, bạn có một sidebar hiển danh mục sản phẩm và main chính sẽ hiển thị tất cả sản phẩm của cty mình đang có. Bình thường các bạn làm thì cần phải truyền tham số qua link rồi ở trang sản phẩm mình phải GET tham số đấy rồi SELECT với database…Mà mình GET tham số trên link thì nó cũng không được tốt cho lắm, thay vào nó bây giờ mình sử dụng Jquery AJAX để xử lý nó một cách dễ dàng và đơn giản hơn ^^.

Bởi vì đây là bài hướng dẫn cho nên mình muốn loại bỏ một số hình thức làm sạch, chuyển đổi dạng dữ liệu và tránh hack SQL Injection, cho nên mình có 1 số lưu ý khi các bạn viết code PHP như sau nếu bạn muốn sử dụng vào project của mình:

Tránh sử dụng SELECT * .. khi mình CSDL mình chỉ có 2 hoặc 3 trường nó sẽ xuất ra những dữ liệu mình không cần dùng đến
Trong khi phát triển project thì bạn nên thêm các trường hợp bẫy lỗi vào để tiện cho việc tìm kiếm lỗi nhanh hơn
VALIDATE các hộp thoại input và string để chống SQL Injection

STEP 1 – SETUP HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Jquery AJAX Loading data when requested</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/AJAX.js"></script> 
</head>
<body>
	<div id="wrapper">
		<div id="container">
			<div id="nav">
				<h1>Loading data when requested</h1>
				<nav role="tab">
					<ul>
						<?php 
						$db = mysqli_connect("localhost","root","","ajax_tab");
						$query_tab = "SELECT * FROM categories";
						$result_tab = mysqli_query($db,$query_tab) 
						or die("mysqli Error: " . mysqli_error($db));
						if(mysqli_num_rows($result_tab) > 0) {
							while($rows = mysqli_fetch_array($result_tab,MYSQLI_ASSOC)) {
								$id_cat = $rows['cat_id'];
								$name_cat = $rows['name'];
								echo "<li id_cat='$id_cat'>$name_cat</li>";
							}   
						}
						?>
					</ul>
				</nav>
			</div><!-- End #nav -->

			<div id="main">
				<div id="loading"></div>
				<div id="data"></div>
			</div>
			
		</div><!-- End #container -->	
	</div><!-- End #wrapper -->
</body>
</html>

Trong phần HTML của mình cũng không có gì nhiều, mình chỉ cho nó hiển thị cái danh mục bài viết ra và ở dưới có 1 div với id là data để load dữ liệu vào đó, nhưng ở đây các bạn chú ý ở đoạn mình echo ra nhé. Trong cái thẻ li mình có truyền cho nó vào một tham số là id_cat và mỗi danh mục của mình trong databse tương ứng nó sẽ có id khác nhau và chút xíu nữa khi mình click vào một danh mục nào đó mình lấy cái id này để SELECT tất cả những bài viết nằm trong danh mục đó.

Code PHP trên mình viết đơn giãn cho các bạn dễ hiểu hơn, khi áp dụng vào project bạn cần làm một số cái mình nói ở trên và mình có thể rút gọn code một chút nữa.

<?php 
	$db = mysqli_connect("localhost","root","","ajax_tab");
	$query_tab = "SELECT cat_id,name FROM categories";
	$result_tab = mysqli_query($db,$query_tab);
	while(list($id_cat,$name_cat) = mysqli_fetch_array($result_tab,MYSQLI_NUM)) {
		echo "<li id_cat='$id_cat'>$name_cat</li>";
	}
?>

Mình có thể dùng hàm list() để gán biến và lấy giá trị luôn cho nó lẹ hì, đỡ mất công phải gán từng cái cho mệt .

Khi mình dùng hàm list() chạy qua từng biến thì biến của mình cần viết theo thứ tự nhé, trong CSDL của mình trường cat_id có row = 0, name_cat có row = 1 và mình phải gán biến theo thứ tự $id_cat = 0 => trường cat_id, $name_cat = 1 => trường name_cat. Khi mình dùng mysqli_fetch_array thì mình thêm một tham số nữa là MYSQLI_NUM để nó chuyển cái mảng này thành dạng số để hàm list() của mình chạy qua từng cái và gán vào biến luôn ha.

STEP 2 – SETUP CSS

*{margin: 0; padding: 0; }

body {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;  
}

a {
	text-decoration: none;
}

#wrapper {
	width: 1000px;
	margin: 0 auto;
}

#container {
	width: 1000px;
	overflow: hidden;
}

#nav {
	margin: 20px;
	border: 1px solid #d4d4d4;
	background: -moz-linear-gradient(top,#fff,#ebebeb);
	background: -webkit-linear-gradient(top,#fff,#ebebeb);
	background: -o-linear-gradient(top,#fff,#ebebeb);
	background: -ms-linear-gradient(top,#fff,#ebebeb);
	width: 290px;
	padding: 20px;
	float: left;
}

#nav h1{
	font-size: 1.4em;
	border-bottom: 1px solid #d4d4d4;
	padding-bottom: 10px;
	text-align: center;
	color: green;
	text-shadow: 0px 1px 0px #d4d4d4;
}

nav[role="tab"] {
	padding-top: 10px;
}

nav[role="tab"] > ul li {
	font-size: 1.4em;
	border-bottom: 1px solid #d4d4d4;
	padding: 5px 0px;
	color: #ac0202;
	cursor: pointer;
}

nav[role="tab"] > ul li:hover {
	color: #888;
}

nav[role="tab"] > ul li:last-child {
	border-bottom: none;
}

#main {
	border: 1px solid #d4d4d4;
	background: -moz-linear-gradient(top,#fff,#ebebeb);
	background: -webkit-linear-gradient(top,#fff,#ebebeb);
	background: -o-linear-gradient(top,#fff,#ebebeb);
	background: -ms-linear-gradient(top,#fff,#ebebeb);
	width: 540px;
	padding: 20px;
	float: right;
	margin: 20px;
	position: relative;
}

#loading {
	position: absolute;
	top: 10px;
	left: 50%;
}

nav[role="main"] {

}

nav[role="main"] ul li {
	float: left;
	padding: 10px;
}

nav[role="main"] ul li img {
	border: 1px solid #d4d4d4;
	background: #fff;
	padding: 4px;
}

Trong phần này mình cũng không làm CSS gì nhiều nên khi các bạn áp dụng vào trang web của mình thì style thêm nhé. Và bây giờ mình bắt đầu vào công việc chính nào .

STEP 3 – Load Data

<?php 
							$db = mysqli_connect("localhost","root","","ajax_tab");
							$query = "SELECT * FROM thumbnail";
							$result = mysqli_query($db,$query);
							$data = "";
							while($row = mysqli_fetch_array($result)) {
								$id = $row['id'];
								$name = $row['name'];
								$cat_id = $row['cat_id'];
								$images = "images/".$row['images'];
								$images = "<img src='$images' width='150' height='150'>";
								$data .= "<li>$images</li>";
							}
							$data = "<nav role='main'><ul>"
									 .$data."
									 </ul></nav>";
							echo $data;
						?>

Đoạn sau này mình không dùng hàm list() nữa là vì mình phải gán biến biến để lấy hình ra nhé.

Trong file data.php này nó chỉ làm nhiệm vụ là xuất tất cả bài viết trong database ra khi người dùng vào lần đầu tiên.

Trong database của mình có nhiều bài viết khi mình dùng vòng lặp while để xuất dữ liệu ra thì mình cần lưu tất cả nó vào biến $data để khi xuống dưới mình sẽ echo $data ra thì dữ liệu của mình sẽ trả về toàn bộ.

Nhắc lại bài cũ một chút xíu là ” .= ” có nghĩa là nối nhiều chuỗi vào cùng một biến nhé.

Bây giờ mình sẽ sử dụng Jquery AJAX để load dữ liệu này như sau :

$(document).ready(function() {
	
	load_data();
	function load_data() {
		$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast'); 
		$.ajax({
			type: "POST",
			url: "data.php",
			success: function(data_log) {
				$('#loading').fadeOut('fast');
				$("#data").html(data_log);
			}
		})
	}
});

Mình sẽ viết một hàm load dữ liệu của file data.php và sau đó mình sẽ cho chạy hàm này, có nghĩa là khi trang web mình được tải xong thì dữ liệu của mình sẽ bắt đầu load xong. Hàm này mình chỉ dùng để tải dữ liệu nên sẽ không có truyền vào tham số gì nhé.

STEP 4 – Loading data when requested

<?php 

if(isset($_POST['id_cat']) && filter_var($_POST['id_cat'], 
	FILTER_VALIDATE_INT, array('min_range'=>1))) {
	$db = mysqli_connect("localhost","root","","ajax_tab");
	$id_cat = mysqli_real_escape_string($db,trim($_POST['id_cat']));
	$get_data = "";
	$get_query = "SELECT * FROM thumbnail WHERE cat_id={$id_cat}";
	$get_result = mysqli_query($db,$get_query);
	while($rows = mysqli_fetch_array($get_result)) {
		$get_id = $rows['id'];
		$get_name = $rows['name'];
		$get_cat_id = $rows['cat_id'];
		$get_images = "images/".$rows['images'];
		$get_images = "<img src='$get_images' width='150' height='150'>";
		$get_data .= "<li>$get_images</li>";
	}
	$get_data = "<nav role='main'><ul>"
					.$get_data."
				</ul></nav>";
	echo $get_data;
}

?>

Trong file get_data.php này mình sẽ thực hiện nhiệm vụ load dữ liệu khi người dùng click chọn danh mục bài viết.

Mình sẽ kiểm tra xem tham số id_cat mình truyền từ AJAX qua có tồn tại hay không, nếu có mình sẽ thực hiện lấy tham số này và SELECT database với điều kiện là id_cat mình vừa lấy được đồng thời phải VALIDATE cái input luôn nhé.

Hàm filter_var có nhiệm vụ lọc cái biến kiểu số nguyên và giá trị của nó phải lớn hơn 1 và không âm.

Sau đó mình dùng thêm mysqli_real_escape_string loại bỏ các ký tự đặc biệt và ký tự vớ vẫn để chống hack SQL Injection nữa nhé.

Nói thêm một chút xíu là CSDL của mình trong MYSQL các bạn nên chú ý cat_id chính là mối liên hệ giữa bảng categories và thumbnail trong CSDL nhé.

Anh Demon Warlock vừa ra một cái traller Lý thuyết của Relational Database trong DVD thứ 2 sắp phát hành của Izwebz, trong video này anh ấy sẽ nói rõ mối liên hệ giữa 2 bảng trong CSDL thì trong CSDL của mình trong bài này cũng làm y chang như vậy.

Bạn có thể xem video ở dưới.

Bây giờ mình sử dụng Jquery AJAX để xử lý khi người dùng click chọn danh mục như sau :

 
$("nav[role='tab'] ul li").click(function() {
			var id_cat = $(this).attr("id_cat");
			$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
			$("#main").slideUp().delay(400).slideDown();
			$.ajax({
				type: "POST",
				url: "get_data.php",
				data: "id_cat="+ id_cat,
				success: function(get_data) {
					$('#loading').fadeOut('fast');
					$("#data").empty().append(get_data);
				}
			});
		});

 
var id_cat = $(this).attr("id_cat");
// $(this) có nghĩa là mình đang nói tới thẻ li được click
// Khi nó được click mình sẽ dùng hàm attr trong Jquery 
// Để lấy tham số id_cat mà mình truyền cho thẻ li trong phần HTML

Sau đó mình sử dụng Jquery AJAX để load dữ liệu ra thôi Bạn chú ý một xíu là khi trang web của mình được tải xong thì dữ toàn bộ dữ liệu trong MYSQL của mình cũng tải xong và nó được đổ vào thẻ div có id là data, bây giờ trước khi mình load dữ liệu mới cho thẻ div với id là data thì mình cần xóa hết dữ liệu cũ nó được tải lần trước đi.

Mình dùng hàm empty để xóa toàn bộ dữ liệu cũ đó đi và mình sẽ dùng tiếp hàm append để thêm dữ liệu mới mình vừa tải xong vào thẻ div với id là data.

Mr. Nav

I'm Mr.Nav, 23 years old, i learn in Viet Tien College, living in DaNang city, VietNam. I do lots of work, but my favorite work is web developer and it is also our specialty.

lopsentop

a ơi cho em hỏi vì sao em sử dụng ajax update du liệu thì bị hủy session

$(‘.update’).click(function(){

alert($(this).attr(‘href’));

$.ajax({
type: ‘put’,
dataType: ‘JSON’,
url: $(this).attr(‘href’),
success: function(string)
{
alert(string.title);
}
});
//location.reload(window.location);
return false;
});

type: ‘put’, không quan trong
nếu có dòng location.reload(window.location); thì không bị mất còn bỏ đi thì bị mất session

em không hiểu vì sao, a chỉ cho em với…
quantien

Xin chào!
Cho mình hỏi một chút; giã sử trong file get_data.php có hai funtion, tôi muốn cho ajax jquery gọi một trong hai funtion đó thì làm như thế nào ?. Xin cảm ơn.
Hiệu Hoàng

Bạn ơi mình muốn down code về để check mà sao để 15 phút vẫn báo đang tải. Đợi hoài chẳng thấy gì cả
http://mediavui.com/news/ tricong

Cái button demo với download của bác nhìn như cái banner quảng cáo, suýt nhầm
http:/abc.com vietanh920

thank bài viết hay !

Nhưng mình thấy cách này chưa thực sự thuyết phục. Giả sử khi mình vào danh mục CSS, mình thấy mục đó hay, muốn gửi link cho bạn bè, nhưng ko có !

Bạn để POST như vậy theo mình ko tiện = GET, người dùng ko có đc đường dẫn mình mong muốn. Vả lại, ajax theo cách này không tốt cho SEO, nếu chỉ làm 1 website profile thì mình thấy nó khả thi hơn !
Dù sao cũng cảm ơn tác giả bài viết này
Nguyễn Hữu Thỏa

Sao cái icon loading không mất đi mà cứ hiện mãi, có cách nào khắc phục không
- http://facebook.com/mr.nav90 Mr. Nav
  
  Cái này nếu bạn check demo online nó load lâu là do nó tải dữ liệu chưa xong và đây chính là sự chậm trễ của mạng. Hoặc mạng bạn đang xài có vấn đề.
http://ungdungdohoa.com Trần Nam

Thank bác, đúng cái em đang cần.
Bác có thể làm thêm một cái tutorial mà tự động load thêm giống facebook được không? Tức là khi kéo xuống tận cùng thì nó tự động load thêm các tin cũ hơn ấy…
Kim Danh

Video của anh rất hay. Anh có thể làm video về submit ajax trả về kiểu JSON, HTML, XHTML. Sự khác biệt giữa các kiểu trả về, dùng firebug để debug ajax xem kết quả trả về để thấy sự khác biệt khi mình ko dùng ajax và dùng ajax.
Rất mong các video về ajax của anh.
Thanks anh nhiều.
Trần Hùng Phi

Mình thấy có nhiều trang (zing.vn,..) thường làm là : ban đầu hiển thị 10 tin và có 1 nút “Load thêm tin”, khi click vào thì hiện thêm tin ra. Nhờ mọi người ai biết phần này thì giải thích sơ về nó dùm e.
NgoaLong

có tutorial ajax jquery json thì tốt
Trịnh Lê Tú

Với một số tác vụ sử dụng kỹ thuật AJAX, giả sử tác vụ đó bắt buộc phải đăng nhập hệ thống trước khi sử dụng.
End user đã đăng nhập hệ thống và làm việc bình thường, sau khoảng thời gian timeout thì session lưu trữ thông tin cần thiết cho tác vụ đó bị hủy (End user đang làm việc thì bỏ đó chạy đi đâu chơi khoảng 1 tiếng chẳng hạn ).
Nếu sau thời gian timeout đó, người dùng tiếp tục thực hiện request lên server thì khi lấy dữ liệu từ session sẽ bị throws ra lỗi “null pointer excepion” ngay.
Tác giả bài viết có giải pháp gì để khắc phục tình trạng này ko?
P/S: Mình thường làm JSP, khi submit thông thường không sử dụng Ajax thì tất cả đều phải qua một lớp trung gian (Filter) để kiểm tra session
- Tátuya
  
  Lỗi ‘null pointer exception’ là do bạn chưa kiểm tra null đã thực thi. Dùng IF kiểm tra session tồn tại hay không rồi xử lý, trong trường hợp session ko có thì redirect về trang đăng nhập chẳng hạn. Còn nếu không muốn bị timeout thì set expire time của session lên, hoặc set khi đóng website mới hủy session.
http://xisat.com.vn/xisathome/ ngọc mẫn

Good Tutorial…!

Thanks and best regards
Thế Công

Chưa có demo rùi bác ơi ^^
Thanks bác rất nhiều vì những tuts rất hay

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.