แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย

10 May 2010 By Ninenik Narkdee
jquery ajax

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery ajax



ในกรณีที่มีการ ใช้งาน ajax เพื่อทำการโหลดเนื้อหาบางส่วนของเว็บไซต์ กับการใช้งานปุ่ม back ปุ่ม forward ในบราวเซอร์ ที่ไม่สอดคล้องกัน เราสามารถใช้  plugin ของ jQuery มาแก้ปัญหานี้ได้

ดูเนื้อหา และรายละเอียดทั้งหมด ด้วยตัวเองได้ที่ลิ้งค์

http://www.asual.com/jquery/address/docs/#sample-usage

ดาวน์โหลดไฟล์ต้นฉบับ พร้อมตัวอย่างได้ที่

http://www.asual.com/blog/jquery/2010/05/05/jquery-address-12-ajax-crawling-url-building-and-more.html

ต่อไปนี้เป็นตัวอย่างการนำมาใช่งานอย่างง่าย

สร้างไฟล์ gdata.php สำหรับรับค่า

<?php
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);    
if($_GET['gDate']){
	echo date("Y-m-d");
	exit;
}
if($_GET['gTime']){
	echo date("H:i:s");	
	exit;
}
if($_GET['gText']){
	echo "Text";	
	exit;
}
?>

ไฟล์ทดสอบ HTML และ JavaScript ไฟล์

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax back button</title>
</head>

<body>

<a href="#gDate">Get Date</a>
<a href="#gTime">Get Time</a>
<a href="#gText">Get Text</a>

<div id="dataShow">

</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.address-1.2.min.js?tracker=track"></script>
<script type="text/javascript">
$(function(){
	
	$.address.init(function(event) {
		
   }).change(function(event) {
	   var goAnchor=event.value;
	   var url="gdata.php";
		switch(goAnchor){
			case "/gDate":
				$("div#dataShow").load(url+"?gDate=1");
				break;
			case "/gTime":
				$("div#dataShow").load(url+"?gTime=1");
				break;
			case "/gText":
				$("div#dataShow").load(url+"?gText=1");
				break;	
		}
	});
	$('a').address(); 	
});
</script>
</body>
</html>

ตัวอย่าง

แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin



เพียงกด Like หรือ Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: ajax jquery







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ