AJAX อัปเดทฐานข้อมูลด้วย Select
AJAX สามารถทำการอัปเดทข้อมูลโดยที่ไม่ต้องผ่านฟอร์ม หรือ Submit หน้าได้ครับ เช่นการเลือก select แล้วไปอัปเดทฐานข้อมูลทันที โดยที่ไม่ต้องกดปุ่มเพื่อส่งค่า
ตัวอย่างผมมี select อยู่ 2 ตัว เมื่อเลือกตัวใดตัวหนึ่ง จะเกิด event onchange ไปเรียก Javascript ทำงานให้ส่งค่าไปโดย AJAX โดยจะถูกส่งไปยัง update.php และรับค่ากลับมาแล้วแสดงผลค่าที่รับไปที่ req.responseText
ไฟล์ update.php ครับ รับค่ามาจาก AJAX ในตัวอย่างผมส่งค่าที่รับมากลับคืนไปเพื่อแสดงผล ถ้าต้องการไปอัปเดทฐานข้อมูลก็ให้เขียนโค้ดอัปเดทฐานข้อมูลตามปกติได้เลย ครับ
<select id="s_a" onchange="do_selectchange(this)">
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a2">a2</option>
</select>
<select id="s_b" onchange="do_selectchange(this)">
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b2">b2</option>
</select>
<script type="text/javascript">
function do_selectchange( sel )
{
var query = 'id='+sel.id+'&value='+sel.value; //ค่าที่ส่งมาใช้เพื่อส่งไปอัปเดท
var req = Inint_AJAX();
req.onreadystatechange = function ()
{
if ( req.readyState == 4 )
{
if ( req.status == 200 )
{
alert( req.responseText ); //เมื่ออัปเดทเรียบร้อย (อาจแสดงข้อความว่าอัปเดทเรียบร้อยก็ได้)
};
};
};
req.open( "POST" , "update.php" ); //สร้าง connection
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); // set Header
req.send( query ); //ส่งค่า
}
</script>
ตัวอย่างผมมี select อยู่ 2 ตัว เมื่อเลือกตัวใดตัวหนึ่ง จะเกิด event onchange ไปเรียก Javascript ทำงานให้ส่งค่าไปโดย AJAX โดยจะถูกส่งไปยัง update.php และรับค่ากลับมาแล้วแสดงผลค่าที่รับไปที่ req.responseText
<?
//กำหนดให้ IE อ่าน page นี้ทุกครั้ง ไม่ไปเอาจาก cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
//กำหนดภาษา
header("content-type: application/x-javascript; charset=utf-8");
//ค่าที่ถูกส่งมาด้วยจาก AJAX
$id = $_POST[id];
$value = $_POST[value];
//อัปเดทลงฐานข้อมูลที่นี่ //ตัวอย่างคืนค่าที่ส่งมากลับไปแสดงผล
echo 'id='.$id.'&value='.$value;
?>
ไฟล์ update.php ครับ รับค่ามาจาก AJAX ในตัวอย่างผมส่งค่าที่รับมากลับคืนไปเพื่อแสดงผล ถ้าต้องการไปอัปเดทฐานข้อมูลก็ให้เขียนโค้ดอัปเดทฐานข้อมูลตามปกติได้เลย ครับ