จากเนื้อหาเดิม เราเคยรูจักวิธีการสร้างไฟล์ json สำหรับใช้งาน ภายใน server ของเรา
แล้วจากหัวข้อ
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()
แต่สำหรับ การสร้างไฟล์ json เพื่อรองรับการใช้งาน jsonp หรือการเรียกใช้ ระหว่าง domain
หรือจากเว็บไซต์อื่นๆ ได้ ผ่าน javascript นั้น จำเป็นต้องมีการกำหนดค่า function call เพิ่มเข้ามา
ตัวอย่าง sample.json
{ "name":"ninenik", "domain":"www.ninenik.com" }
จากตัวอย่างไฟล์ ด้านบน ถ้ามีการเรียกใช้งาน ไฟล์ json ผ่าน ajax หรือ XMLHttpRequest
ภายใน server domian เดียวกัน ก็จะสามารถทำได้
ตัวอย่างเช่นการเรียกใช้งาน ด้วย jquery
$.getJSON( "sample.json", function( data ) { console.log(data); });
แต่สำหรับ การใช้งาน jsonp เช่น เราอยู่ที่ server coffeeiam.com
เราจะไม่สามารถเรียกใช้งาน คำสั่งด้านล่างนี้ได้
// ไม่สามารถเรียกใช้งานไฟล์ json ผ่าน ninenik.com จาก เว็บไซต์ coffeeiam.com $.getJSON( "//www.ninenik.com/sample.json", function( data ) { console.log(data); });
ทีนี้เรามาดู การเรียกใช้งานไฟล์ json แบบ jsonp หรือข้าม domain ว่าทำได้อย่างไร
การใช้งาน แบบ jsonp จะต้องมีการส่งค่า query parameter เข้าไปใน url ไฟล์ที่เรียกใช้ด้วย
โดยทั่วไป เขาจะใช้คำา jsonp หรือ callback หรือใช้ชื่ออื่นก็ได้ แต่ที่นี้จะใช้ชื่อว่า callback
และตามด้วยค่าของมัน ตัวอย่าง callback=JSON_CALLBACK
เช่น //www.ninenik.com/sample.json?callback=JSON_CALLBACK
และไฟล์ sample.json ก็ต้องมีรูปแบบ ดังนี้คือ
ค่าของ parameter ชื่อ callback คือ JSON_CALLBACK ต่อด้วยวงเล็บเปิดปิด
และมีรูปแบบไฟล์ json ปกติกอยู่อยู่ด้านใน
ตัวอย่างไฟล์ sample.json
สำหรับใช้งาน jsonp ในรูปแบบ JSON_CALLBACK();
JSON_CALLBACK({ "name":"ninenik", "domain":"www.ninenik.com" });
เมื่อเรามีไฟล์ json รูปบบ ที่รองรับการใช้งาน jsonp แล้ว
เราก็สามารถเรียกใช้จาก server อื่นได้ เช่น เรียกใช้จาก coffeeiam.com
ด้านล่างจะเป็นรูปแบบ การเรียกใช้งาน ผ่าน ajax ของ jquery
$.ajax({ url: "//www.ninenik.com/sample.json", dataType: "jsonp", jsonp: "callback", jsonpCallback:"JSON_CALLBACK" }).done(function (data){ console.log(data); });
ทีนี้มาเข้าจุดประสงค์ของเนื้อหา คือเราต้องการสร้างไฟล์ json แบบรองรับทั้ง
ภายใน server และจาก server อื่น โดยจะเป็นการสร้างจากฐานข้อมูล ซึ่งจะใช้รูปแบบ
เดิมจากหัวข้อ
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()
โค้ดสร้างไฟล์ json ด้วย php
ตัวอย่าง เราจะได้ไฟล์เช่น กำหนดชื่อ province.php ไฟล์นี้เมื่อเรียกใช้ จะแสดงผลเป็น json ไฟล์
<?php header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // ส่วนติดต่อกับฐานข้อมูล mysql_connect("localhost","root","test") or die("Cannot connect the Server"); mysql_select_db("test") or die("Cannot select database"); mysql_query("set character set utf8"); ?> <?php $q="SELECT * FROM province_th WHERE 1 ORDER BY province_id"; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ $json_data[]=array( "province_id"=>$rs['province_id'], "province_name"=>$rs['province_name'], ); } $json= json_encode($json_data); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } ?>
เป็นอันจบ เนื้อหาทำความเข้าใจ กับ json แบบง่าย
หมายเหตุ เนื้อหาส่วนนี้มีความสำคัญ ในการศึกษาเพิ่มเติม สำหรับ angularjs หรือ การใช้งาน
ionicframework จึงนำมาเป็นบทความ เพื่อทำความเข้าใจ กันก่อน
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 21-10-2017
กรณีใช้งาน mysqli
โค้ดไฟล์ dbconnect.php
<?php $mysqli = new mysqli("localhost", "root","","test"); / check connection / if ($mysqli->connect_errno) { printf("Connect failed: %sn", $mysqli->connect_error); exit(); } if(!$mysqli->set_charset("utf8")) { printf("Error loading character set utf8: %sn", $mysqli->error); exit(); }
ไฟล์ province.php
<?php header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); require_once("inc/dbconnect.php"); $json_data = array(); $sql = " SELECT * FROM province_th WHERE 1 ORDER BY province_id "; $result = $mysqli->query($sql); if($result && $result->num_rows > 0){ while($row = $result->fetch_assoc()){ $json_data[] = array( "province_id" => $row['province_id'], "province_name" => $row['province_name'] ); } } // แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_data); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } } ?>
URL สำหรับอ้างอิง