2017年9月13日 星期三

使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況 


<!-- 檔案：0914-6a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
	<ul>
		<li><a href="0914-6a.html">第1頁</a></li>
		<li><a href="0914-6b.html">第2頁</a></li>
		<li><a href="0914-6c.html">第3頁</a></li>
	</ul>
	<div id="content">
		<div id="container">
			<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A">			
		</div>
	</div>
	<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>


<!-- 檔案：0914-6b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
	<ul>
		<li><a href="0914-6a.html">第1頁</a></li>
		<li><a href="0914-6b.html">第2頁</a></li>
		<li><a href="0914-6c.html">第3頁</a></li>
	</ul>
	<div id="content">
		<div id="container">
			<img src="https://api.fnkr.net/testimg/100x100/0b0/FFF/?text=B">
		</div>
	</div>
	<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>


<!-- 檔案：0914-6c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
	<ul>
		<li><a href="0914-6a.html">第1頁</a></li>
		<li><a href="0914-6b.html">第2頁</a></li>
		<li><a href="0914-6c.html">第3頁</a></li>
	</ul>
	<div id="content">
		<div id="container">
			<img src="https://api.fnkr.net/testimg/100x100/00c/FFF/?text=C">
		</div>
	</div>
	<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>


/*檔案：0914-6.css*/
a.current{
	color: #a00;
}


// 檔案：0914-6.js
	$('a').click(function(e){
		e.preventDefault();
		var url = this.href;
		$('a').removeClass('current');
		$(this).addClass('current');
		$('#container').remove();

		$.ajax({
			type:'GET',
			url:url,
			timeout:2000, //等待回應時間
			beforeSend:function(xhr){
			      if (xhr.overrideMimeType) {                 // 若支援此特性
			        xhr.overrideMimeType("application/json"); // 設定MIME特性避免錯誤
			      }
				$('#content').append('<div id="load">載入中....</div>');
			},
			complete:function(){
				$('#load').remove();
			},
			success:function(data){
				$('#content').html($(data).find('#container').hide().fadeIn());
			},
			error:function(){
				('#content').html('<div id="container">請稍後再試一次</div>')
			}

		});

	});




Posted by 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)