บทความนี้จะเป็นตัวอย่างการใช้ 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.
`
Name
`
varchar
(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"
>
05.
<script src=
"http://code.jquery.com/jquery-latest.min.js"
></script>
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 สำเร็จหรือไม่ ถ้าสำเร็จ
สำเร็จ
message = Record add successfully
ไม่สำเร็จ
message = Error insert data!
เมื่อ jQuery ได้รับค่าจะสามารถอ่านค่า json ได้เลย เช่น result.status และ result.message
ผลลัพธ์ที่ได้
การ Insert ข้อมูลด้วย Ajax
ข้อมูลเข้าสู่ฐานข้อมูล MySQL Database
แหล่งที่มา : http://www.thaicreate.com/community/jquery-ajax-mysql-json.html