Sep. 11
24

เพิ่มรายการเข้าไปในลิสต์บ้อกด้วย AJAX

By วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

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

บทความน่าสนใจ

  1. ระบบยืนยันการลงทะเบียนด้วยอีเมล์ verify by email
  2. สร้าง Todo List ด้วย jQuery AJAX
  3. ตัวหนังสือวิ่งมาราธอน
  4. AJAX Loading…
  5. jQuery เขียน AJAX ด้วยคำสั่ง $.get()
This entry was posted in PHP and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

ผู้เขียน: วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Email : admin@select2web.com

Post a Comment

You must be logged in to post a comment.