ข่าวประชาสัมพันธ์

jQuery กับ Ajax และ MySQL ส่งค่าจาก Form และจัดเก็บลงใน MySQL และการรับ-ส่งด้วย JSON

 บทความนี้จะเป็นตัวอย่างการใช้ jQuery กับ Ajax ในการรับค่า Input จาก Form ส่งค่าทั้งหมดด้วยคำคำสั่ง $(“#frmMain”).serialize() ซึ่งจะสะดวกในการที่จะส่งค่าไปยัง PHP ได้ในครั้งเดียว และหลังจากที่ PHP ได้รับค่าจะสามารถอ่านโดยใช้คำสั่ง $_POST เพื่อนำค่าที่ได้ไป Insert ลงใน MySQL Database และหลังจากที่ Insert ลงใน Database เรียบร้อยแล้วก็จะส่งค่า JSON กลับมายัง jQuery เพื่อให้รู้ว่าสถานะการ Insert เป็นอย่างไร ด้วยการใช้ header(‘Content-Type: application/json’); และ JSON Object ซึ่งฝั่งของ jQuery จะรู้ทันทีว่าค่าที่ถูกส่งมาเป็น JSON ด้วยการอ่านจาก Object ID นั้นๆ 

jQuery กับ Ajax และ MySQL

jQuery กับ Ajax ใช้ Serialize() ส่งค่า Form อ่านค่า JSON (Content-Type: application/json)

เพื่อความเข้าจเกี่ยวกับ jQuery Ajax และ JSON ควรอ่านบทความนี้ให้เข้าใจก่อน

MySQL Table

01.CREATE TABLE `customer` (
02.`CustomerID` varchar(4) NOT NULL,
03.`Namevarchar(50) NOT NULL,
04.`Email` varchar(50) NOT NULL,
05.`CountryCode` varchar(2) NOT NULL,
06.`Budget` double NOT NULL,
07.`Used` double NOT NULL,
08.PRIMARY KEY  (`CustomerID`)
09.) ENGINE=MyISAM DEFAULT CHARSET=utf8;

จากนั้นให้เขียน Code ที่เป็น jQuery กับ Ajax และ PHP ดังนี้

post.html

01.<html>
02.<head>
03.<title>ThaiCreate.Com Tutorials</title>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
06.</head>
07.<body>
08. 
09.<form action="" name="frmMain" id="frmMain" method="post">
10.<table width="284" border="1">
11.<tr>
12.<th width="120">CustomerID</th>
13.<td width="238"><input type="text" name="txtCustomerID" id="txtCustomerID" size="5"></td>
14.</tr>
15.<tr>
16.<th width="120">Name</th>
17.<td><input type="text" name="txtName" id="txtName" size="20"></td>
18.</tr>
19.<tr>
20.<th width="120">Email</th>
21.<td><input type="text" name="txtEmail" id="txtEmail" size="20"></td>
22.</tr>
23.<tr>
24.<th width="120">CountryCode</th>
25.<td><input type="text" name="txtCountryCode" id="txtCountryCode" size="2"></td>
26.</tr>
27.<tr>
28.<th width="120">Budget</th>
29.<td><input type="text" name="txtBudget" id="txtBudget" size="5"></td>
30.</tr>
31.<tr>
32.<th width="120">Used</th>
33.<td><input type="text" name="txtUsed" id="txtUsed" size="5"></td>
34.</tr>
35.</table>
36.<br>
37.<input type="button" name="btnSend" id="btnSend" value="Send">
38.</form>
39. 
40.<script type="text/javascript">
41.$(document).ready(function() {
42. 
43.$("#btnSend").click(function() {
44. 
45.$.ajax({
46.type: "POST",
47.url: "save.php",
48.data: $("#frmMain").serialize(),
49.success: function(result) {
50.if(result.status == 1) // Success
51.{
52.alert(result.message);
53.}
54.else // Err
55.{
56.alert(result.message);
57.}
58.}
59.});
60. 
61.});
62. 
63.});
64.</script>
65. 
66.</body>
67.</html>

save.php

01.<?php
02.header('Content-Type: application/json');
03. 
04.$serverName "localhost";
05.$userName "root";
06.$userPassword "root";
07.$dbName "mydatabase";
08. 
09.$conn = mysqli_connect($serverName,$userName,$userPassword,$dbName);
10. 
11.$sql = "INSERT INTO customer (CustomerID, Name, Email, CountryCode, Budget, Used)
12.VALUES ('".$_POST["txtCustomerID"]."','".$_POST["txtName"]."','".$_POST["txtEmail"]."'
13.,'".$_POST["txtCountryCode"]."','".$_POST["txtBudget"]."','".$_POST["txtUsed"]."')";
14.$query = mysqli_query($conn,$sql);
15. 
16.if($query) {
17.echo json_encode(array('status' => '1','message'=> 'Record add successfully'));
18.}
19.else
20.{
21.echo json_encode(array('status' => '0','message'=> 'Error insert data!'));
22.}
23. 
24.mysqli_close($conn);
25.?>

คำอธิบาย
เมื่อ PHP รับค่าจาก Ajax จะทำการ Insert ลงใน MySQL Database และมีการ Return ค่าที่เป็น JSON กลับไปว่าทำการ Insert สำเร็จหรือไม่ ถ้าสำเร็จ

สำเร็จ

status = 1
message = Record add successfully

ไม่สำเร็จ

status = 0
message = Error insert data!

เมื่อ jQuery ได้รับค่าจะสามารถอ่านค่า json ได้เลย เช่น result.status และ result.message

ผลลัพธ์ที่ได้

jQuery กับ Ajax และ MySQL

การ Insert ข้อมูลด้วย Ajax

jQuery กับ Ajax และ MySQL

ข้อมูลเข้าสู่ฐานข้อมูล MySQL Database 

 

แหล่งที่มา : http://www.thaicreate.com/community/jquery-ajax-mysql-json.html

แชร์ข่าวนี้