Tequila

บทความนี้เกิดจากโจทย์ที่เพื่อนของผมคนหนึ่งถามมา

ดูหน้าตาของสิ่งที่จะทำก่อนดีกว่า
add-list-item-ajax-01

โจทย์ก็คือ มีฟอร์ม 1 ฟอร์ม ในฟอร์มมีลิสต์บ้อก 1 ตัวและอื่นๆ ลิสต์บ้อกตัวนี้ ถ้าหากไม่มีค่าที่ต้องการ ให้สามารถกดปุ่มเพิ่มค่าเข้าไปในลิสต์บ้อกโดยใช้ AJAX และค่าที่เพิ่มเข้าไปนั้น ต้องเอาไปเก็บในฐานข้อมูลด้วย

เพื่อนผมอยากให้เขียนเป็นบทความไว้ในเว็บ เพื่อเขาจะได้เข้ามาอ่าน

เริ่มโดยการสร้างฐานข้อมูล เก็บค่าตัวเลือกในลิสต์บ้อก

CREATE TABLE IF NOT EXISTS `lists` (
  `list_id` BIGINT(20) NOT NULL AUTO_INCREMENT,
  `list_name` VARCHAR(255) NOT NULL,
  PRIMARY KEY  (`list_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

สร้างไฟล์ add_to_database.php รอรับค่าจาก AJAX แล้วบันทึกค่าลงฐานข้อมูล

<?php require_once('Connections/connection.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
$insertSQL = sprintf("INSERT INTO lists (list_name) VALUES (%s)",
				   GetSQLValueString($_POST['list_name'], "text"));
 
mysql_select_db($database_connection, $connection);
$Result1 = mysql_query($insertSQL, $connection);
 
$list_id = mysql_insert_id();
 
if( $Result1 )
{
	$return_val = array(
		"result"=>"success",
		"id"=>$list_id);
 
	echo json_encode( $return_val );
}
else
{
	$return_val = array(
		"result"=>"fail",
		"id"=>NULL);
 
	echo json_encode( $return_val );
}
?>

สร้างฟอร์มมีลิสต์บ้อก 1 ตัวและอื่นๆ

<form method="post" name="form1" id="form1">
  <table align="center">
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">หมวดหมู่ :</td>
      <td><select name="book_list_id" id="book_list_id">
        <option value="" >เลือกรายการ</option>
      </select></td>
      <td><input type="text" name="new_list" id="new_list" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">ชื่อหนังสือ:</td>
      <td><input type="text" name="book_name" value="" size="32" /></td>
      <td><input type="button" name="ok" id="ok" value="เพิ่มรายการในลิสต์บ้อก" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">รายละเอียด :</td>
      <td><textarea name="book_desc" cols="70" rows="7"></textarea></td>
      <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">&nbsp;</td>
      <td><input type="submit" value="Save" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

กำหนด id ของลิสต์บ้อก,เท็กบ้อก,ปุ่ม เพื่อง่ายต่อการเขียนโปรแกรม

เขียนโค้ด jQuery ใช้งาน AJAX

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("#ok").click(function(){
 
		if( $("#new_list").val() == "" )
		{
			alert( "Please Insert New Item" );
			return false;
		}	
 
		var post_url = "add_to_database.php";
		var data_set = { list_name: $( "#new_list" ).val() } ;
		var data_type = "json";
 
		$.post( 
			post_url , 
			data_set , 
			function(resp){
					//+ resp คือข้อมูลที่ส่งกลับมาจาก Server 
 					if( resp.result == "success" )
					{
						$( "#book_list_id" ).append( " <option selected='selected' value='"+ resp.id +"' >"+ $( "#new_list" ).val() +"</option>" );
 
						//+ แจ้งให้ยูสเซ่อร์ทราบว่าทุกอย่างไปได้สวย
						alert(  "ไอเท่มใหม่เพิ่มเรียบร้อย" );
 
						//+ เคลียร์ค่าในเท็กบ้อกทิ้ง
						$( "#new_list" ).val( "" );
					}
					else
					{
						alert(  "เกิดข้อผิดพลาดบางอย่าง ข้อมูลไม่ถูกบันทึก โปรดลองใหม่อีกครั้ง" );
					}
		  },
		  data_type
		);
 
	});
 
});
</script>

เมื่อกดปุ่ม เพิ่มรายการในลิสต์บ้อก จะตรวจดูในเท็กบ้อก new_list ก่อนว่าป้อนอะไรมาหรือเปล่า ถ้าไม่ป้อนอะไรมาให้ฟ้อง ถ้าป้อนมาแล้วให้เอาค่าในเท็กบ้อก ส่งไปยังเซิฟเวอร์ด้วย AJAX และบอกว่าค่าที่ส่งกลับมานั้นขอให้เป็น JSON
ถ้าเซิฟเวอร์ตอบกลับมาว่า success เอาค่าเพิ่มเข้าไปในลิสต์ selected ให้เสร็จสรรพ ถ้าตอบมาว่า fail ให้แจ้งยูสเซอร์ ลองใหม่อีกที

โค้ดทั้งหมด ไฟล์ add_new_list.html

<!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>Add New List</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("#ok").click(function(){
 
		if( $("#new_list").val() == "" )
		{
			alert( "Please Insert New Item" );
			return false;
		}	
 
		var post_url = "add_to_database.php";
		var data_set = { list_name: $( "#new_list" ).val() } ;
		var data_type = "json";
 
		$.post( 
			post_url , 
			data_set , 
			function(resp){
					//+ resp คือข้อมูลที่ส่งกลับมาจาก Server 
 					if( resp.result == "success" )
					{
						$( "#book_list_id" ).append( " <option selected='selected' value='"+ resp.id +"' >"+ $( "#new_list" ).val() +"</option>" );
 
						//+ แจ้งให้ยูสเซ่อร์ทราบว่าทุกอย่างไปได้สวย
						alert(  "ไอเท่มใหม่เพิ่มเรียบร้อย" );
 
						//+ เคลียร์ค่าในเท็กบ้อกทิ้ง
						$( "#new_list" ).val( "" );
					}
					else
					{
						alert(  "เกิดข้อผิดพลาดบางอย่าง ข้อมูลไม่ถูกบันทึก โปรดลองใหม่อีกครั้ง" );
					}
		  },
		  data_type
		);
 
	});
 
});
</script>
 
</head>
 
<body>
<form method="post" name="form1" id="form1">
  <table align="center">
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">หมวดหมู่ :</td>
      <td><select name="book_list_id" id="book_list_id">
        <option value="" >เลือกรายการ</option>
      </select></td>
      <td><input type="text" name="new_list" id="new_list" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">ชื่อหนังสือ:</td>
      <td><input type="text" name="book_name" value="" size="32" /></td>
      <td><input type="button" name="ok" id="ok" value="เพิ่มรายการในลิสต์บ้อก" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">รายละเอียด :</td>
      <td><textarea name="book_desc" cols="70" rows="7"></textarea></td>
      <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">&nbsp;</td>
      <td><input type="submit" value="Save" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

จะเห็นว่าการเขียน AJAX ด้วย jQuery นั้นง่ายมากๆ ง่ายจนเหลือเชื่อ ใครที่ยังเขียน AJAX ด้วยการเรียกใช้งาน xmlHttpRequest โดยตรง ลองมาเขียนด้วย jQuery เถอะ แล้วจะรู้ว่า แท้จริงแล้วสวรรค์อยู่ใกล้ตัวเรานี่เอง

เกือบลืม connection.php