การใช้งาน AJAX ในการบันทึกข้อมูลลงฐานข้อมูล โดยไม่ต้อง Refresh

AJAX สามารถ ทำการบันทึกข้อมูลได้ทันที โดยที่ไม่ต้องทำการ submit หน้าก่อน จากตัวอย่าง จะเป็นการบันทึกข้อมูลทันทีที่มีการคลิกเลือก checkbox (สร้างฐานข้อมูลก่อนการทดสอบด้วยครับ)

<?
  //ค่ากำหนดของ ฐานข้อมูล
  $host="localhost";
  $username="root";
  $password="";
  $dbname="mydb";
  $table="sample";

  //เชื่อมต่อกับ MySQL
  $connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
  $db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
  //คำสั่ง SQL ให้อ่านฐานข้อมูล
  $sql="SELECT * FROM $table ORDER BY ID";
  //Query ฐานข้อมูล
  $query=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
  //จำนวนข้อมูลทั้งหมดที่อ่านได้
  $num_rows=mysql_num_rows($query);
?>

<head>
<title>AJAX กับ Check box</title>
</head>
<body>
คลิกเลือก checkbox แต่ละตัว แล้วลอง Refresh ดู จะเห็นว่าค่า Checkbox ยังคงอยู่<br />
แสดงว่าข้อมูลการคลิก จัดเก็บลงฐานข้อมูลเรียบร้อยแล้ว
<div id=status> </div>
<table border="0" cellspacing="0" cellpadding="0">
<?
  for ($i=0; $i<$num_rows; $i++) {
    $result=mysql_fetch_array($query);
    $check=($result[sel]==1) ? "checked":"";
    echo "<tr><td id=topic$i>$result[topic]</td><td><input type=checkbox id=$result[id] onclick='doClick(this);' $check></td></tr> ";
  }
?>
</table>
<?
  //ยกเลิกการติดต่อกับฐานข้อมูล
  mysql_close($connect);
?>
</body>
</html>
<script>
//AJAX สำหรับจัดการบันทึกลงฐานข้อมูล
function Inint_AJAX() {
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
  try { return new XMLHttpRequest(); } catch(e) {}
  alert("XMLHttpRequest not supported");
  return null;
}

//คำสั่งที่ทำเมื่อคลิก checkbox
function doClick(chk) {
  var req = Inint_AJAX();
  var val=(chk.checked) ? 1:0;
  var id= String(chk.id);
  req.open('GET', 'save.php?id='+id+'&val='+val, true);
  req.onreadystatechange = function() {
    if (req.readyState==4) {
      if (req.status==200) {
        var data=req.responseText;
        //แสดง error ถ้ามี
        document.getElementById("status").innerHTML=data;
      }
    }
  };
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); // set Header
  req.send(null);
}

</script>

หน้า test.php หน้าหลักสำหรับทดสอบ

<?
  //header ยกเลิกการใช้ cache ของ IE
  header("Expires: Sat, 1 Jan 2005 00: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");
  
  //ค่ากำหนดของฐานข้อมูล
  $host="localhost";
  $username="root";
  $password="";
  $dbname="mydb";
  $table="sample";

  //ค่าที่รับมา
  $id=$_GET["id];
  $val=$_GET["val];

  //คำสั่ง SQL ให้แก้ไขข้อมูล
  $sql="UPDATE $table SET sel='$val' WHERE id='$id'";

  //เชื่อมต่อกับ MySQL
  $connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
  $db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
  //แก้ไขข้อมูล
  $query=mysql_query($sql) or die("ไม่สามารถแก้ไขฐานข้อมูลได้");
  //ยกเลิกการติดต่อกับ MySQL
  mysql_close($connect);
?>

หน้า save.php สำหรับบันทึกข้อมูลลง db ซึ่งเป็นหน้าที่ถูก AJAX เรียกมาเมื่อคลิกที่ checkbox

# phpMyAdmin SQL Dump
# version 2.5.7-pl1
# http://www.phpmyadmin.net
#
# โฮสต์: localhost
# เวลาในการสร้าง: 19 ก.ย. 2006 น.
# รุ่นของเซิร์ฟเวอร์: 5.0.16
# รุ่นของ PHP: 4.4.1
#
# ฐานข้อมูล : `mydb`
#

# --------------------------------------------------------

#
# โครงสร้างตาราง `sample`
#

CREATE TABLE `sample` (
  `topic` text character set utf8,
  `sel` smallint(11) default '0',
  `id` int(11) NOT NULL auto_increment,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 AUTO_INCREMENT=25 ;

#
# dump ตาราง `sample`
#

INSERT INTO `sample` VALUES ('รายการที่ 6', 0, 0);
INSERT INTO `sample` VALUES ('รายการที่ 5', 0, 1);
INSERT INTO `sample` VALUES ('รายการที่ 4', 0, 2);
INSERT INTO `sample` VALUES ('รายการที่ 3', 0, 3);
INSERT INTO `sample` VALUES ('รายการที่ 2', 1, 4);
INSERT INTO `sample` VALUES ('รายการที่ 1', 0, 5);
INSERT INTO `sample` VALUES ('รายการที่ 0', 0, 6);
INSERT INTO `sample` VALUES ('รายการที่ 7', 0, 7);
INSERT INTO `sample` VALUES ('รายการที่ 8', 0, 8);
INSERT INTO `sample` VALUES ('รายการที่ 9', 0, 9);

ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost ต้องสร้างฐานข้อมูลนี้ก่อนการทดสอบตัวอย่างนะครับ
    
ผู้เขียน goragod โพสต์เมื่อ 01 เม.ย. 2551 เปิดดู 33,624 ป้ายกำกับ AJAX
^