สร้างไฟล์ json จากฐานข้อมูล รองรับการใช้งาน jsonp callback

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
json jsonp ฐานข้อมูล php javascript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ json jsonp ฐานข้อมูล php javascript

ดูแล้ว 20,057 ครั้ง


จากเนื้อหาเดิม เราเคยรูจักวิธีการสร้างไฟล์ 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( "https://www.ninenik.com/sample.json", function( data ) {
 console.log(data);
});
 
 
ทีนี้เรามาดู การเรียกใช้งานไฟล์ json แบบ jsonp หรือข้าม domain ว่าทำได้อย่างไร
 
การใช้งาน แบบ jsonp จะต้องมีการส่งค่า query parameter เข้าไปใน url ไฟล์ที่เรียกใช้ด้วย
โดยทั่วไป เขาจะใช้คำา jsonp หรือ callback หรือใช้ชื่ออื่นก็ได้ แต่ที่นี้จะใช้ชื่อว่า callback 
และตามด้วยค่าของมัน ตัวอย่าง callback=JSON_CALLBACK
 
เช่น https://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: "https://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;    
    }    
}
?>


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ