ถามเรื่องการวนลูป parameter ของ Ajax มีวิธีการอย่างไรครับ
function inputExcel() {
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; }
//alert(document.getElementById("cpd_type").value);
var url = 'cpd_submit_cpa_db.php';
var pmeters = "tnum=" + encodeURI(document.getElementById("num").value)
;
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("div1").innerHTML = "<center><img src=img/ajax-loader.gif /></center>";
}
if(HttPRequest.readyState == 4) // Return Request
{
setTimeout(function(){
document.getElementById("div1").innerHTML = HttPRequest.responseText;
}, 500);
}
}
}
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; }
//alert(document.getElementById("cpd_type").value);
var url = 'cpd_submit_cpa_db.php';
var pmeters = "tnum=" + encodeURI(document.getElementById("num").value)
;
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("div1").innerHTML = "<center><img src=img/ajax-loader.gif /></center>";
}
if(HttPRequest.readyState == 4) // Return Request
{
setTimeout(function(){
document.getElementById("div1").innerHTML = HttPRequest.responseText;
}, 500);
}
}
}
จริงๆแล้ว วิธีการเขียน แบบ Ajax หรือแบบ ปกติเหมือนกันทุกประการครับ
เพราะสิ่งที่ต้องการ คือ ข้อมูลที่จะ query ออกมา เท่านั้น ซึ่งถ้าเราสามารถ query ข้อมูลปกติ ออกมาได้ การร้องข้อข้อมูลด้วย Ajax ก็ทำได้ ด้วยวิธีเดียวกัน
<?php
// ...... โค้ดอื่นๆ บลาๆๆๆๆๆ
$page = $_GET['page'];
$sql = "SELECT * FROM........."; // query แบ่งหน้าปกติ
// .... โค้ดแสดงผลข้อมูลที่ได้จากการ query ตามด้านบน
// โค้ด สำหรับการเลือกหน้าถัดไป
// ..........
// ...... โค้ดอื่นๆ บลาๆๆๆๆๆ
?>
ถ้าโค้ดด้านบน คือ โค้ดที่คุณเขียนเพื่อแสดงผล ข้อมูลได้ สามารถแบ่งหน้าได้ สามารถทำงานได้ การใช้ Ajax ในการแบ่งหน้าก็ไม่ยาก
<?php
// ...... โค้ดอื่นๆ บลาๆๆๆๆๆ
echo '<div id=page_list></div>';
// ..........
// ...... โค้ดอื่นๆ บลาๆๆๆๆๆ
?>
จะเห็นว่าผมแทรก div page_list ลงแทนที่พื้นที่ส่วนของการ query ซึ่ง page_list นี่เองที่ผมจะใช้เป็นพื้นที่ ที่เมื่อเรียก Ajax แล้วจะนำมาใช้แสดงผล
ถัดมาคือ ก็ต้องเขียน Ajax แล้วละครับ ซึ่งคร่าวๆก็คล้ายๆโค้ดด้านบน
pmeters = 'page=1';
HttPRequest.send(pmeters);
page คือ หน้าที่ต้องการ แสดงหน้า 1 ก็ส่ง 1 ไป ต้องการหน้าไหนก็เขียนเอาละกันครับ
สุดท้าย โค้ดที่หายไป เราจะเอาไปใส่ไว้ที่ cpd_submit_cpa_db.php แทน ซึ่งสิ่งที่ส่งไป คือ $page เท่านั้น เราก็รับค่า และนำมา query
<?php
$page = $_POST['page']; // รับแบบไหน อยู่ที่วิธีการส่งค่าแบบ AJAX
$sql = "SELECT * FROM........."; // query แบ่งหน้าปกติ
// .... โค้ดแสดงผลข้อมูลที่ได้จากการ query ตามด้านบน
// โค้ด สำหรับการเลือกหน้าถัดไป
?>
ก็ echo ผลลัพท์ตามปกติ ค่าที่ได้ จะถูกส่งกลับไปที่ HttPRequest.responseText เราก็เอาไปใส่ลงใน page_list ได้เลยครับ
หลักการก็มีเท่านี้ ซึ่งจะเห็นว่า มันก็คือวิธีเดียวกันกับการเขียนแบบ ปกติ นั่นเอง
สิ่งสำคัญคือ ทำแบบปกติ ให้ได้ก่อนครับ