การรีเฟรชแล้ให้จำค่า
คือผมเอาตัวอย่างการซื้อขายออนไลน์จากเว็บ http://www.thaicreate.com/tutorial/ajax-shopping-cart.html ไปประยุกต์ใช้
เวลาเลือกสินค้าผมให้บันทึกลงดาต้าเบส แล้วนำมาแสดงโดยใช้ ajax ไม่รีเฟรชหน้า ก็สามารถทำได้ปกติ มีการเพิ่มปกติ แต่พอผมกดปุ่ม refresh หรือ f5 ของบราวเซอร์ แล้วค่าที่เลือกหรือแสดงไว้ มันหายไปครับ มีวิธีแก้ไขยังไงครับ
script โดยย่อ
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(UserID,ProductID,Qty) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'AjaxPHPShoppingCart2.php';
var pmeters = "tUserID=" + UserID+
"&tProductID=" + ProductID+
"&tQty=" + Qty;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
/////////////////////////////////////////////////////
AjaxPHPShoppingCart2.php โค้ดโดยย่อ
if($strProductID != "" && ($strQty !="" || $strQty !="0"))
{
$strSQL = "INSERT INTO tb_tmpcart ";
$strSQL .="(iduser,idmachine,qty,dateselect)";
$strSQL .="VALUES ";
$strSQL .="('".$strUserID."','".$strProductID."','".$strQty."','".$current_server_time."') ";
$objQuery = mysql_query($strSQL);
}
.....
$sql_tmpOrder=mysql_query("SELECT * FROM tb_tmpcart ORDER BY id ASC") or die(mysql_error());
$rowtmpOrder = mysql_num_rows($sql_tmpOrder);
if($rowtmpOrder>0)
{
........
ขอบคุณครับ
เวลาเลือกสินค้าผมให้บันทึกลงดาต้าเบส แล้วนำมาแสดงโดยใช้ ajax ไม่รีเฟรชหน้า ก็สามารถทำได้ปกติ มีการเพิ่มปกติ แต่พอผมกดปุ่ม refresh หรือ f5 ของบราวเซอร์ แล้วค่าที่เลือกหรือแสดงไว้ มันหายไปครับ มีวิธีแก้ไขยังไงครับ
script โดยย่อ
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(UserID,ProductID,Qty) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'AjaxPHPShoppingCart2.php';
var pmeters = "tUserID=" + UserID+
"&tProductID=" + ProductID+
"&tQty=" + Qty;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
}
}
}
</script>
/////////////////////////////////////////////////////
AjaxPHPShoppingCart2.php โค้ดโดยย่อ
if($strProductID != "" && ($strQty !="" || $strQty !="0"))
{
$strSQL = "INSERT INTO tb_tmpcart ";
$strSQL .="(iduser,idmachine,qty,dateselect)";
$strSQL .="VALUES ";
$strSQL .="('".$strUserID."','".$strProductID."','".$strQty."','".$current_server_time."') ";
$objQuery = mysql_query($strSQL);
}
.....
$sql_tmpOrder=mysql_query("SELECT * FROM tb_tmpcart ORDER BY id ASC") or die(mysql_error());
$rowtmpOrder = mysql_num_rows($sql_tmpOrder);
if($rowtmpOrder>0)
{
........
ขอบคุณครับ
โดยปกติ การป้องกันการ refresh ทำไม่ได้ง่ายนักหรอกครับ เราจำเป็นต้องออกแบบหน้าเว็บเพื่อให้รองรับวิธีการนี้โดยเฉพาะ (ซึ่งค่อนข้างยุ่งยาก) วิธีการคร่าวๆ มักจะเป็นแบบนีครับ
กรณีที่ 1 สำหรับ ลิงค์ทั่วไป ที่มีข้อมูลไม่มากนัก เราอาจเก็บ url ของหน้าที่เรียกมา ด้วย Ajax โดยใช้วิธีการบันทึก ลง SESSION หากมีการ refresh หน้า ก็ให้ไตรวจสอบ หน้าที่เรียก จาก SESSION แล้วนำมากำหนดเป็น parameter แทน เพื่อโหลดหน้าล่าสุดมาแสดง
กรณีที่ 2 ซี่งมักเป็นตะกร้าสินค้า หรือ อะไรอย่างอื่นที่อาจต้องมีการเลือกข้อมูลมาก่อน (เหมือนที่โจทย์ต้องการ)แล้วเกิดการ refresh ขึ้นในขั้นตอนใดขั้นตอนหนึ่ง เราอาจใช้วิธีการ บันทึกรายการสินค้าที่เลือกลงบน db แทนก็ได้ครับ โดยการบันทึกร่วมกับ session ปัจจุบันของผุ้เลือก โดยที่ให้เราทำการตรวจสอบอยู่เสมอในขณะที่เรียกหน้าว่ามี session นี้อยู่หรือเปล่า ถ้ามี ให้โหลด session เดิมมาแสดง ถ้าไม่มี หรือมาจากหน้าเลือกสินค้า ก็ให้แสดงตามปกติ
ปัญหาในกรณีที่2 ปกติ มักเกิดขึ้นได้กับทั้ง กรณีที่ ใช้ Ajax หรือไม่ ก็ได้ครับ เพียงแต่หากไม่ใช่ Ajax เราสามารถดูข้อมูลล่าสุดได้จาก URL ซึ่งสิ่งที่เราทำก็เพียงเปลี่ยนจากการดูจาก URL มาดูที่ SESSION แทนเท่านั้น
ฟังดูอาจงงๆ นะครับ และอาจจำเป็นต้องแก้ไขเยอะ เพื่อให้ทำงานได้ตามคาดหวัง แต่หลักการสั้นๆของมันก็มีแค่ แทนที่จะดูลิงค์จาก URL ก็ให้เปลี่ยนมา ดูจาก SESSION แทน โดยให้บันทึก URL ที่เรียกลง SESSION เสมอ ไม่ว่า GET หรือ POST ครับ
ขอบคุณครับ แล้วจะลองดู
ขอตัวอย่างได้หรือป่าวครับ ไม่ค่อยเก่ง ajax ครับ
ผมลองใช้ body onload เรียกฟังชั่นแลวก็ไม่ได้ครับ
คือหน้าเพจผมใช้ วิธี include เอาครับ
มีหน้า index แล้วเรียกหน้าสินค้ามาแสดง พอเลือกสินค้าก็เรียกอีกหน้ามาเพื่อใส่จำนวน แล้วในหน้านี้ก็จะเป็น สคริป ajax มีการอ้าง id div ในหน้านี้ ซึ่งในหน้านี้จะเป็น php ไม่มีส่วน body พอคลิกเพิ่มสินค้าก็จะเรียก ฟังก์ชั่นใช้งานได้ตามปกติ พอรีเฟรชแล้วไม่รู้จะใส่ฟังก์ชั่นเริ่มต้นให้ทำงานอย่างไร
ช่วยยกตัวอย่างให้ดูด้วยครับ