ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
XML, JSON และ AJAX 030523315 – Web Programming and Web Database
Asst. Prof. Dr. Choopan Rattanapoka
2
JSON ย่อมาจาก Javascript Object Notation
มีลักษณะการทำงานแทน XML แต่ใช้งานง่ายกว่า และมีขนาดของข้อมูล เล็กกว่า XML รูปแบบของ JSON นั้น จริงๆ แล้วเหมือนกับการสร้าง Object ใน ภาษา Javascript JSON เป็นข้อความในรูปแบบ String
3
เปรียบเทียบ XML และ JSON
4
การสร้าง Javascript Object จากเอกสาร JSON
var text = ‘{“name”: “John”, “phone” : “ ”}’; จากนั้นใช้ เมธอด JSON.parse(ข้อความ JSON); เพื่อแปลงให้ กลายเป็น javascript object var obj = JSON.parse(text); เมื่อได้ javascript object มาแล้วสามารถที่จะเรียกใช้ค่าใน object ได้เลย obj.name (ได้ John) obj.phone (ได้ )
5
Synax ของ JSON Data จะต้องอยู่ในรูปแบบของ name/value
“firstname” : “Choopan” Name ของ JSON จะต้องอยู่ใน “ ” เสมอ Data จะถูกแยกออกจากกันด้วย คอมม่า “,” วงเล็บปีกกา { } ใช้ คลุม Object { “firstname” : “Luffy” , “age” : 20 } วงเล็กก้ามปู [ ] ใช้สำหรับคลุม Array “employee” : [ {“firstname” : “somchai”, “age” : 38}, {“firstname” : “somying”, “age” : 20} ]
6
การสร้าง Javascript Object จาก JSON text
var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; var obj = JSON.parse(text); เสร็จแล้วจะสามารถใช้ obj.employees[0].firstname เพื่อเข้าถึงค่า John ได้
7
JSON และ Ajax (ผ่าน Jquery) [1]
ตัวอย่างง่ายๆ ของ JSON และ AJAX ใช้ เมธอด getJSON File : data.json { “name” : “ECT”, “faculty” : “CIT” } jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )
![JSON และ Ajax (ผ่าน Jquery) [1]](http://slideplayer.in.th/slide/16611624/96/images/7/JSON+%E0%B9%81%E0%B8%A5%E0%B8%B0+Ajax+%28%E0%B8%9C%E0%B9%88%E0%B8%B2%E0%B8%99+Jquery%29+%5B1%5D.jpg "ตัวอย่างง่ายๆ ของ JSON และ AJAX ใช้ เมธอด getJSON. File : data.json. { name : ECT , faculty : CIT } jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )")
8
JSON และ Ajax (ผ่าน Jquery) [2]
File : test.html <!DOCTYPE html> <html><head> <script src=" <script> $(document).ready(function(){ $("#mybtn").click(function(){ $.getJSON('data.json', function(data) { alert(data.name + " : " + data.faculty); }); </script> </head> <body> <button id="mybtn" type=“button”>Ajax</button> </body> </html>
![JSON และ Ajax (ผ่าน Jquery) [2]](http://slideplayer.in.th/slide/16611624/96/images/8/JSON+%E0%B9%81%E0%B8%A5%E0%B8%B0+Ajax+%28%E0%B8%9C%E0%B9%88%E0%B8%B2%E0%B8%99+Jquery%29+%5B2%5D.jpg "File : test.html. <!DOCTYPE html> <html><head> <script src= ></script> <script> $(document).ready(function(){ $( #mybtn ).click(function(){ $.getJSON( data.json , function(data) { alert(data.name + : + data.faculty); }); </script> </head> <body> <button id= mybtn type= button >Ajax</button> </body> </html>")
9
JSON, AJAX และ PHP [1] $.getJSON จะเป็นการเรียก URL ปกติ เพื่อให้ได้ข้อมูลของ JSON กลับมา ดังนั้น สามารถเรียกไปยังหน้าที่เป็น PHP เพื่อดึงข้อมูลจากฐานข้อมูลได้ ตัวอย่าง : สร้างตาราง products(id, name, price) ในฐานข้อมูลชื่อ json ดังนี้ id เป็น int, primary key, auto_increment name เป็น varchar(32) price เป็น int
![JSON, AJAX และ PHP [1]](http://slideplayer.in.th/slide/16611624/96/images/9/JSON%2C+AJAX+%E0%B9%81%E0%B8%A5%E0%B8%B0+PHP+%5B1%5D.jpg "$.getJSON จะเป็นการเรียก URL ปกติ เพื่อให้ได้ข้อมูลของ JSON กลับมา ดังนั้น สามารถเรียกไปยังหน้าที่เป็น PHP เพื่อดึงข้อมูลจากฐานข้อมูลได้ ตัวอย่าง : สร้างตาราง products(id, name, price) ในฐานข้อมูลชื่อ json ดังนี้ id เป็น int, primary key, auto_increment. name เป็น varchar(32) price เป็น int.")
10
JSON, AJAX และ PHP [2] data.php <?php try {
$conn = new PDO("mysql:host=localhost;dbname=json", 'root', ''); $conn -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $price = $_GET['price']; $sql = "SELECT * FROM products WHERE price <= $price"; $q = $conn->query($sql); $result = $q->fetchAll(PDO::FETCH_ASSOC); echo json_encode($result); $conn = null; } catch(PDOException $e) { echo "Error :" . $e->getMessage(); } ?>
![JSON, AJAX และ PHP [2] data.php < php try {](http://slideplayer.in.th/slide/16611624/96/images/10/JSON%2C+AJAX+%E0%B9%81%E0%B8%A5%E0%B8%B0+PHP+%5B2%5D+data.php+%3C+php+try+%7B.jpg "$conn = new PDO( mysql:host=localhost;dbname=json , root , ); $conn -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $price = $_GET[ price ]; $sql = SELECT * FROM products WHERE price <= $price ; $q = $conn->query($sql); $result = $q->fetchAll(PDO::FETCH_ASSOC); echo json_encode($result); $conn = null; } catch(PDOException $e) { echo Error : . $e->getMessage(); } >")
11
JSON, AJAX และ PHP [3]
![JSON, AJAX และ PHP [3]](http://slideplayer.in.th/slide/16611624/96/images/11/JSON%2C+AJAX+%E0%B9%81%E0%B8%A5%E0%B8%B0+PHP+%5B3%5D.jpg "JSON, AJAX และ PHP [3]")
12
กรณีที่ต้องการปรับแต่งได้มากขึ้นใช้ .ajax
$.ajax({ url: URL, dataType: 'json', async: false, success: function(data) { } });
13
งานสุดท้าย หาทางเอาเอง ให้สามารถกรอง หมวดหมู่ที่หน้า index.php ได้
งานนำเสนอที่คล้ายกัน
![การจัดการข้อมูลกับฐานข้อมูล [ การแก้ไขข้อมูล ] Teerapong Sangraksawong.](/8/2199423/big_thumb.jpg "การจัดการข้อมูลกับฐานข้อมูล [ การแก้ไขข้อมูล ] Teerapong Sangraksawong.>")
