Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,907

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



 
Clound SSD Virtual Server

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

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
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<input type="button" name="btnSend" id="btnSend" value="Send">

<script type="text/javascript">
		$(document).ready(function() {
			
			$("#btnSend").click(function() {
					
					var jsonObj = {"name":"Wisarut Nukitram", "age": "39"}

					$.ajax({
					   type: "POST",
					   url: "post.php",
					   data: jsonObj,
					   success: function(result) {
						alert(result);
					   }
					 });

			});
	
		});
</script>

</body>
</html>









post.php
<?php
echo $_POST["name"];
echo $_POST["age"];
?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่ามีการส่งค่าที่อยู่ในรูปแบบของ 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
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<input type="button" name="btnSend" id="btnSend" value="Send">

<script type="text/javascript">
		$(document).ready(function() {
			
			$("#btnSend").click(function() {
					
					var jsonString = "{\"name\":\"Wisarut Nukitram\", \"age\": \"39\"}";

					$.ajax({
					   type: "POST",
					   url: "post.php",
					   contentType: 'application/json',
					   data: jsonString,
					   success: function(result) {
						alert(result);
					   }
					 });

			});
	
		});
</script>

</body>
</html>

post.php
<?php
$input = file_get_contents('php://input');
$obj = json_decode($input);

echo $obj->{'name'};
echo $obj->{'age'};
?>

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

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

jQuery , Ajax , JSON

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

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

php
<?php
$input = file_get_contents('php://input');
$obj = json_decode($input);

foreach ($obj as $data)
{
    echo $data->name;
    echo $data->age;
}
?>

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

jQuery , Ajax , JSON



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

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

post.html
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<form action="" name="frmMain" id="frmMain" method="post">
<table width="284" border="1">
  <tr>
    <th width="120">CustomerID</th>
    <td width="238"><input type="text" name="txtCustomerID" id="txtCustomerID" size="5"></td>
    </tr>
  <tr>
    <th width="120">Name</th>
    <td><input type="text" name="txtName" id="txtName" size="20"></td>
    </tr>
  <tr>
    <th width="120">Email</th>
    <td><input type="text" name="txtEmail" id="txtEmail" size="20"></td>
    </tr>
  <tr>
    <th width="120">CountryCode</th>
    <td><input type="text" name="txtCountryCode" id="txtCountryCode" size="2"></td>
    </tr>
  <tr>
    <th width="120">Budget</th>
    <td><input type="text" name="txtBudget" id="txtBudget" size="5"></td>
    </tr>
  <tr>
    <th width="120">Used</th>
    <td><input type="text" name="txtUsed" id="txtUsed" size="5"></td>
    </tr>
  </table>
  <br>
  <input type="button" name="btnSend" id="btnSend" value="Send">
</form>

<script type="text/javascript">
		$(document).ready(function() {
			
			$("#btnSend").click(function() {
			
					$.ajax({
					   type: "POST",
					   url: "post.php",
					   data: $("#frmMain").serialize(),
					   success: function(result) {
						alert(result);
					   }
					 });

			});
	
		});
</script>

</body>
</html>

post.php
<?php
echo $_POST["txtCustomerID"];
echo $_POST["txtName"];
echo $_POST["txtEmail"];
echo $_POST["txtCountryCode"];
echo $_POST["txtBudget"];
echo $_POST["txtUsed"];
?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่าเราสามารถส่งค่า 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
<html>
<head>
<title>ThaiCreate.Com Tutorials</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<form action="" name="frmMain" id="frmMain" method="post">
<table width="284" border="1">
  <tr>
    <th width="120">CustomerID</th>
    <td width="238"><input type="text" name="txtCustomerID" id="txtCustomerID" size="5"></td>
    </tr>
  <tr>
    <th width="120">Name</th>
    <td><input type="text" name="txtName" id="txtName" size="20"></td>
    </tr>
  <tr>
    <th width="120">Email</th>
    <td><input type="text" name="txtEmail" id="txtEmail" size="20"></td>
    </tr>
  <tr>
    <th width="120">CountryCode</th>
    <td><input type="text" name="txtCountryCode" id="txtCountryCode" size="2"></td>
    </tr>
  <tr>
    <th width="120">Budget</th>
    <td><input type="text" name="txtBudget" id="txtBudget" size="5"></td>
    </tr>
  <tr>
    <th width="120">Used</th>
    <td><input type="text" name="txtUsed" id="txtUsed" size="5"></td>
    </tr>
  </table>
  <br>
  <input type="button" name="btnSend" id="btnSend" value="Send">
</form>

<script type="text/javascript">
		$(document).ready(function() {
			
			$("#btnSend").click(function() {
			
					$.ajax({
					   type: "POST",
					   url: "post.php",
					   data: $("#frmMain").serialize(),
					   success: function(result) {
					       alert(result.customerid);
					       alert(result.name);
					       alert(result.email);
					       alert(result.countrycode);
					       alert(result.budget);
					       alert(result.used);
					   }
					 });

			});
	
		});
</script>

</body>
</html>

post.php
<?php
	header('Content-Type: application/json');

	$arr = array("customerid"=>$_POST["txtCustomerID"],
							"name"=>$_POST["txtName"],
							"email"=>$_POST["txtEmail"],
							"countrycode"=>$_POST["txtCountryCode"],
							"budget"=>$_POST["txtBudget"],
							"used"=>$_POST["txtUsed"]);

	echo json_encode($arr);
?>

คำอธิบาย
จากตัวอย่างนี้จะเห็นว่าฝั่ง 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


   
Share
Bookmark.   

  By : TC Admin
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2017-02-23
  Download : No files
Sponsored Links
C# มา โหลด โน่น โหลดนี่กันเถอะ (โปรแกรมดาวน์โหลดด้วย C#)
C# มา โหลด โน่น โหลดนี่กันเถอะ (โปรแกรมดาวน์โหลดด้วย C#)
ผมเองเป็นคนชอบโหลบ ทั้ง หนัง เพลง การ์ตูนต่างๆ ดังนั้น ผมจึงมักที่จะเขียนโค้ดสำหรับไว้โหลด โน่น โหลดนี่เสมอ โดยใช้หลักการของ System.Text.RegularExpressions
Rating : Update : 2019-05-16 20:29:51
ฐานข้อมูล MySql ชื่อประเทศ ไทย+อังกฤษ
ฐานข้อมูล MySql ชื่อประเทศ ไทย+อังกฤษ
ฐานข้อมูล MySql ชื่อประเทศ ไทย+อังกฤษ (แปะไว้เตือนตัวเอง เวลาลืมว่าเคยทำไว้) พร้อมการใช้กับ PHP
Rating : Update : 2018-03-23 20:57:43
มาใช้ Notepad++ ทำการ Compare ไฟล์ระหว่างไฟล์ 2 ไฟล์ว่ามีตรงไหนบ้างที่แตกต่างกัน
มาใช้ Notepad++ ทำการ Compare ไฟล์ระหว่างไฟล์ 2 ไฟล์ว่ามีตรงไหนบ้างที่แตกต่างกัน
วิธีใช้ Notepad++ กับปลั๊กอินที่ใช้สำหรับทำการ Compare ไฟล์ระหว่างไฟล์ 2 ไฟล์ว่ามีตรงไหนบ้างที่แตกต่างกัน จำเป็นอย่างยิ่งในการเขียนโปรแกรม
Rating : Update : 2019-07-18 15:09:35
SQL Server Call HTTP URL เรียกใช้งาน URL Website จาก Stored Procedure
SQL Server Call HTTP URL เรียกใช้งาน URL Website จาก Stored Procedure
เทคนิคการใช้ SQL Server Call URL เรียกใช้งาน URL Website จาก Stored Procedure ของ SQL Server สามารถประยุกต์การใช้งานกับ Function ต่างๆ เช่น การเรียกให้ URL ทำงานเมื่อ Stored Procedure ทำงานเสร็จ
Rating : Update : 2019-04-29 09:39:38
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ไม่ต้องแก้ register_globals = On ก็เรียกใช้ตัวแปรแบบเดิมๆได้
ปกติแล้วเวลาทำการติดตั้ง php ค่า default ของ register_globals จะเป็น Off แต่บางครั้งเราก็มีความจำเป็นที่เราจะต้องการใช้งาน ในแบบที่ register_globals=On เช่น ไม่อยากไปแก้ code โปรแกรมเดิมที่เขียนไว้ตั้งนานแล้วบ้างล่ะ แต่จะทำยังไง ถ้าหากว่า server ที่เราจำเป็นต้องใช้งานเค้ากำหนด register_globals มาให้เป็น Off ล่ะจะทำยังไง
Rating : Update : 2018-05-16 13:07:47
5 ไอเดียเด่น ทำเว็บไซต์อะไรดี?
5 ไอเดียเด่น ทำเว็บไซต์อะไรดี?
ปัจจุบันการทำเว็บไซต์ไม่ใชเรื่องยากอีกต่อไป ทำให้หลายคนหันมาสร้างพื้นที่ส่วนตัวบนเว็บกันมากขึ้น และที่สำคัญทำ
Rating : Update : 2018-02-27 17:17:04
ดึงข้อมูลจาก oracle ภาษาไทย php
ดึงข้อมูลจาก oracle ภาษาไทย php
วิธีแก้ดึงข้อมูลจาก oracle ??? เป็นภาษาไทย php
Rating : Update : 2019-08-26 11:36:53
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   







Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่