บทความนี้เกิดจากโจทย์ที่เพื่อนของผมคนหนึ่งถามมา
ดูหน้าตาของสิ่งที่จะทำก่อนดีกว่า
โจทย์ก็คือ มีฟอร์ม 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> </td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right"> </td> <td><input type="submit" value="Save" /></td> <td> </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> </td> </tr> <tr valign="baseline"> <td nowrap="nowrap" align="right"> </td> <td><input type="submit" value="Save" /></td> <td> </td> </tr> </table> </form> </body> </html> |
จะเห็นว่าการเขียน AJAX ด้วย jQuery นั้นง่ายมากๆ ง่ายจนเหลือเชื่อ ใครที่ยังเขียน AJAX ด้วยการเรียกใช้งาน xmlHttpRequest โดยตรง ลองมาเขียนด้วย jQuery เถอะ แล้วจะรู้ว่า แท้จริงแล้วสวรรค์อยู่ใกล้ตัวเรานี่เอง
เกือบลืม connection.php
Leave a Reply