แนะนำการใช้งาน jQuery . ajax . Json เบื้องต้น เพื่อเตรียมตัวเป็น "Web programming"
รูปแบบหรือโครงสร้างของข้อมูลที่ใช้รับ-ส่ง
ไฟล์ตัวอย่าง :: code_10.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#Mybutton').click(function(){ $.ajax({ url: 'json.php', dataType: "json", success: function( datajson ) { $( "#mindphp2").html(datajson.a); }, }) }) }); </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> <div id="mindphp2">TODO write content</div> <button id="Mybutton">Mybutton</button> </body> </html>
|
ไฟล์ตัวอย่าง :: json.php |
<?php $arr = array('a' => date('Y-m-d H:i:s'), 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr); ?>
|
คำอธิบาย :: หลังจากทำการคลิกที่ปุ่ม เราจะให้ค่า a ในไฟล์ Json.php มาเเสดงผลโดยรูปแบบการส่ง คือใช้ Json ที่ตำแหน่ง #mindphp2
ผลที่ได้ :: เมื่อคลิกที่ปุ่ม จะทำการแสดงผล 2014-06-20 11:57:08 ที่ตำแหน่ง #mindphp2