ในกรณีที่มีการ ใช้งาน ajax เพื่อทำการโหลดเนื้อหาบางส่วนของเว็บไซต์ กับการใช้งานปุ่ม back ปุ่ม forward ในบราวเซอร์ ที่ไม่สอดคล้องกัน เราสามารถใช้ plugin ของ jQuery มาแก้ปัญหานี้ได้
ดูเนื้อหา และรายละเอียดทั้งหมด ด้วยตัวเองได้ที่ลิ้งค์
http://www.asual.com/jquery/address/docs/#sample-usage
ดาวน์โหลดไฟล์ต้นฉบับ พร้อมตัวอย่างได้ที่
ต่อไปนี้เป็นตัวอย่างการนำมาใช่งานอย่างง่าย
สร้างไฟล์ 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
