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

http://www.thaicreate.com/community/jquery-ajax-json.html

 

 

 

 

jQuery กับ Ajax และ JSON ใช้ Serialize() ส่งค่า Form อ่านค่า JSON (Content-Type: application/json) เหตุผลที่ต้องการเขียนบทความขึ้นมาใหม่ เพราะที่ผ่าน แอดมินเองหรือสมาชิกหลายๆ คนยังใช้งาน jQuery กับ Ajax ไม่ค่อยจะถูกวิธีตามที่มันได้ถูกออกแบบมา และไม่เกิดประโยชน์ในด้านความสะดวกในการใช้งานซะเท่าไหร่ และยังมีการถามมาอยู่เรื่อยๆ เกี่ยวกับการส่งค่าจาก Form ไปยัง PHP ด้วย jQuery และการรับ-ส่ง ค่าด้วย JSON ซึ่งในที่ผ่านมาได้เขียนบทความไว้เยอะแยะมากมาย มีทั้งวิธีที่ถูกๆ ผิดๆ ซึ่งถ้าจะถามว่ามันใช้งานได้หรือไม่ คำตอบคือได้ แต่ถ้าเรามีวิธีที่สะดวกและรวดเร็วกว่าเดิม ด้วยการใช้งานให้ถูกต้องตามรูปแบบต่างๆ ของข้อมูลที่จะส่ง มันจะช่วยให้การเขียนโปรแกรมของเรานั้นรวดเร็วและง่ายยิ่งขึ้นมากเลยทีเดียว

jQuery , Ajax และ JSON

รูปแบบการส่งข้อมูล Ajax ด้วย jQuery จะมีการรองรับรูปแบบของข้อมูลได้หลายประเภท เช่น ข้อมูลที่อยู่รูปแบบ String, JSON Object, JSON String หรือว่าจะเป็นข้อมูลที่อยู่ในรูปแบบของ Input Form ก็สามารถส่งไปทาง Ajax ด้วย jQuery ได้เช่นเดียวกัน


 

 


Exalple 1 : การส่งค่าจาก jQuery แบบโดยส่งไปเป็นแบบ JSON Object

สำหรับการส่งค่าในรูปแบบนี้คือชุดของข้อมูลที่จะส่งอยู่ในรูปแบบของ JSON เรียบร้อยแล้วและพร้อมที่จะส่งไปกับ Ajax ได้เลย

var jsonObj = {“name”:”Wisarut Nukitram”, “age”: “39”}

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.<input type="button" name="btnSend" id="btnSend" value="Send">
10. 
11.<script type="text/javascript">
12.$(document).ready(function() {
13. 
14.$("#btnSend").click(function() {
15. 
16.var jsonObj = {"name":"Wisarut Nukitram", "age": "39"}
17. 
18.$.ajax({
19.type: "POST",
20.url: "post.php",
21.data: jsonObj,
22.success: function(result) {
23.alert(result);
24.}
25.});
26. 
27.});
28. 
29.});
30.</script>
31. 
32.</body>
33.</html>

post.php

1.<?php
2.echo $_POST["name"];
3.echo $_POST["age"];
4.?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่ามีการส่งค่าที่อยู่ในรูปแบบของ JSON Object อยู่แล้ว ซึ่งฝั่งของ PHP สามารถอ่านค่าจาก $_POST[“name”] และ $_POST[“age”] ได้เลย

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

jQuery , Ajax , JSON

Exalple 2 : การส่งค่าจาก jQuery แบบโดยส่งไปเป็นแบบ JSON String

สำหรับการส่งค่าในรูปแบบนี้คือข้อมูล JSON จะอยู่ในรูปแบบของ String คือ ข้อความ ซึ่งในการส่งผ่าน Ajax เราจะต้องระบุ contentType: ‘application/json’ ไปด้วย

var jsonString = “{\”name\”:\”Wisarut Nukitram\”, \”age\”: \”39\”}”;

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.<input type="button" name="btnSend" id="btnSend" value="Send">
10. 
11.<script type="text/javascript">
12.$(document).ready(function() {
13. 
14.$("#btnSend").click(function() {
15. 
16.var jsonString = "{\"name\":\"Wisarut Nukitram\", \"age\": \"39\"}";
17. 
18.$.ajax({
19.type: "POST",
20.url: "post.php",
21.contentType: 'application/json',
22.data: jsonString,
23.success: function(result) {
24.alert(result);
25.}
26.});
27. 
28.});
29. 
30.});
31.</script>
32. 
33.</body>
34.</html>

post.php

1.<?php
2.$input = file_get_contents('php://input');
3.$obj = json_decode($input);
4. 
5.echo $obj->{'name'};
6.echo $obj->{'age'};
7.?>

คำอธิบาย
จาก Code นี้จะเห็นว่าข้อความที่ส่งมานั้นไม่ได้เป็น JSON Object เพียงแต่เป็นข้อความที่อยู่ในรูปแบบของ JSON String เท่านั้น ฉะนั้นฝั่งของ PHP จะต้องทำการ json_decode ถึงจะอ่านค่าได้

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

jQuery , Ajax , JSON

เพิ่มเติม ในกรณีที่เป็น JSON มีเป็นข้อความชุดแบบ Array ให้ใช้ foreach ในการ Loop ค่า เช่น

json

1.var jsonString = "[{\"name\":\"Wisarut Nukitram\", \"age\": \"39\"},{\"name\":\"Wipa Nukitram\", \"age\": \"16\"}]";

php

01.<?php
02.$input = file_get_contents('php://input');
03.$obj = json_decode($input);
04. 
05.foreach ($obj as $data)
06.{
07.echo $data->name;
08.echo $data->age;
09.}
10.?>

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

jQuery , Ajax , JSON

Exalple 3 : การส่งค่าจาก jQuery ด้วยการอ่านข้อมูลจาก Form ทั้งหมดแล้วส่งไปยัง PHP

ในการส่งค่าของ Form ทั้งหมดเราสามารถใช้ .serialize() ซึ่งมันจะอ่านค่าทั้งหมดที่อยู่ใน Form ในขณะนั้นๆ ไปกับ Ajax

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: "post.php",
48.data: $("#frmMain").serialize(),
49.success: function(result) {
50.alert(result);
51.}
52.});
53. 
54.});
55. 
56.});
57.</script>
58. 
59.</body>
60.</html>

post.php

1.<?php
2.echo $_POST["txtCustomerID"];
3.echo $_POST["txtName"];
4.echo $_POST["txtEmail"];
5.echo $_POST["txtCountryCode"];
6.echo $_POST["txtBudget"];
7.echo $_POST["txtUsed"];
8.?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่าเราสามารถส่งค่า Form ทั้งหมดด้วยคำสั่ง $(“#frmMain”).serialize() และฝั่งของ PHP สามารถอ่านค่าจาก $_POST ได้เลย

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

jQuery , Ajax , JSON

Exalple 4 : การใช้ PHP ส่งค่ากลับไปเป็น JSON ด้วย header(‘Content-Type: application/json’);

ใน 2-3 ตัวอย่างที่ผ่านมา เราจะเห็นว่ามีการใช้ echo เพื่อส่งค่า String กลับไปให้กับ jQuery ซึ่งในกรณีที่เราต้องการส่งค่ากลับไปเป็นแบบ JSON ปกติแล้วในบทความหลายๆ บทความจะใช้การส่งไปเป็นแบบ JSON String คือ ฝั่ง jQuery จะต้องการ Decode ด้วยคำสั่ง jQuery.parseJSON() แล้วจึงจะได้ข้อความที่ต้องการออกมา แตืมันมีวิธีง่ายกกว่านั้นคือ เราสามารถใช้ PHP ส่งค่า header(‘Content-Type: application/json’); กลับไป ซึ่งเมื่อ jQuery ได้รับค่ากลับ จะสามารถเรียก Object ของ JSON นั้นๆ ได้เลย โดยไม่ต้องการทำการ Decode แต่อย่างใด

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: "post.php",
48.data: $("#frmMain").serialize(),
49.success: function(result) {
50.alert(result.customerid);
51.alert(result.name);
52.alert(result.email);
53.alert(result.countrycode);
54.alert(result.budget);
55.alert(result.used);
56.}
57.});
58. 
59.});
60. 
61.});
62.</script>
63. 
64.</body>
65.</html>

post.php

01.<?php
02.header('Content-Type: application/json');
03. 
04.$arr = array("customerid"=>$_POST["txtCustomerID"],
05."name"=>$_POST["txtName"],
06."email"=>$_POST["txtEmail"],
07."countrycode"=>$_POST["txtCountryCode"],
08."budget"=>$_POST["txtBudget"],
09."used"=>$_POST["txtUsed"]);
10. 
11.echo json_encode($arr);
12.?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่าฝั่ง PHP มีการรับค่าจาก Ajax และส่งค่ากลับที่อยู่ในรูปแบบของ JSON Object และ header(‘Content-Type: application/json’); ซึ่งฝั่ง jQuery เมื่อรับค่ากลับจะสามารถอ่านค่าจาก Object ได้ทันที เช่น result.customerid

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

jQuery , Ajax , JSON

จากตัวอย่างทั้ง 4 ตัวนี้ เราพอจะเข้าใจการทำงานของ jQuery กับ Ajax ในการรับส่งข้อมูลที่อยู่ในรูปแบบต่างๆ ซึ่งถ้าเราเข้าใจ จะสามารถนำไปประยุกต์แนะนำไปใช้งานให้ถูกวิธี ซึ่งมันจะช่วยให้การเขียนโปรแกรมของเรานั้นง่ายและสะดวกมากๆ

บทความอื่นๆ ที่เกี่ยวข้อง
Go to : jQuery กับ Ajax และ MySQL ส่งค่าจาก Form และจัดเก็บลงใน MySQL และการรับ-ส่งด้วย JSON
Go to : jQuery Ajax กับ JSON (Web Service) ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *