ส่งค่าโดยใช้ jQuery และ Json

ทดสอบการทำงานของการส่งและรับข้อมูลโดยใช้ json เป็นสื่อกลางระหว่าง client และ server

ส่วน HTML

<form action=”process.php” method=”post” id=”addcontact”>
<input type=”text” name=”firstname” placeholder=”Name”><br/>
<input type=”telephone” name=”telnumber” placeholder=”Tel. “><br/>
<input type=”submit” value=”Save”>
</form>

ส่วน PHP (process.php)

<?

header(“Content-type:application/json;charset=utf-8“);

$json = array(
“success”=>false,
contact=>0
); //กำหนดค่าเริ่มต้นให้กับ array ที่จะนำไปแปลงเป็น json

if(isset($_POST[‘firstname’],$_POST[‘telnumber’])){

$name = $_POST[‘firstname’];
$tel = $_POST[‘telnumber’];

$json[‘success’] = true;
$json[‘contact’] = array(“name”=>$name,”tel”=>$tel);

}

print(json_encode($json));//แปลง array ให้อยู่ในแบบ json

?>

ส่วน JSON // Output ที่ได้จากไฟล์ PHP

{
“success”: true,
“contact”: {
“name”: “Supachai”,
“tel”: “0879090909”
}
}

ส่วน jQuery

$(‘#addcontact’).on(‘submit’,function(e){
e.preventDefault(); //ยกเลิก event การส้่งค่าจาก form แบบปกติ
var me = $(this),//ตัวแปร me แทน #addcontact
contents = me.serialize(); //Outout ที่แสดงออกมาหลังจากผ่านการ serialize คือ firstname=…&telnumber=…

$.ajax({
url:’process.php’,
dataType:’json’;
type:’post’;
data:contents,
success: function(data){
if(data.success){
console.log(“Name: “+data.contact.name+”\n”+”Tel Number: “+data.contace.tel); //แสดงผลลัพธ์ใน Console
}
}
});
return false;

});

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s