20 May 2012 05:45:37

การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()

04 November 2010

ตัวอย่างต่อไปนี้เป็นสร้างไฟล์ json จากฐานข้อมูลด้วย php โดยคร้างสร้างฐานข้อมูลตัวอย่างเป็นฐานข้อมูลจังหวัด
ในประเทศไทย ชื่อ province_th ประกอบด้วย ฟิลด์ province_id และ province_name

โค้ดไฟล์ gen_json.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);  
// ส่วนติดต่อกับฐานข้อมูล
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);
echo $json;
?>

การใช้งานด้วย jQuery getJSON() ฟังก์ชัน
อ่านวิธีการใช้งานของฟังก์ชั getJSON() ได้ด้วยตัวเองที่
http://api.jquery.com/jQuery.getJSON/

โค้ดไฟล์ use_jsondata.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery use json data</title>
</head>

<body>

<p id="showData"></p>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	 $.getJSON("gen_json.php",function(data){
		 // เราสามารถเลือกข้อมูลบ้างส่วนมาแสดงได้
		 $("#showData").html(data[0].province_name);
		 // เราสามารถวนลูปแสดงข้อมูล json ได้ ด้วย $.each() ฟังก์ขัน
		 $.each(data,function(i,k){
			 $("#showData").append(data[i].province_name+"<br>");
		 });
	 });
});
</script>


</body>
</html>

json จากฐานข้อมูล getjson() ไฟล์ การสร้าง และการใช้งานด้วย ด้วย php jquery

บทความในหมวดที่่น่าสนใจ อื่นๆ

02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4481 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 4368 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 4336 22 Aug 09 เรียกใช้งาน jQuery ผ่าน Google API อ่าน 4305 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 4295 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 4274 25 Dec 09 สร้าง watermark ลายน้ำ ให้กับช่อง สำหรับการค้นหา ด้วย jQuery และ CSS อย่างง่าย อ่าน 4262 27 Jun 11 ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQuery อ่าน 4210 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 4209 19 Nov 09 สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery อ่าน 4188 25 Sep 08 Event ของ jquery แบบ Basic อ่าน 4176 22 Dec 10 เพิ่มลูกเล่น การแสดงข้อมูล เลื่อนสลับบน ล่าง คล้าย twitter ด้วย jQuery อ่าน 4150 09 Oct 09 ขยายขนาดความสูงของ iframe ตามความสูงของเพจที่แสดง ด้วย jQuery อ่าน 4123 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 4101 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 1 อ่าน 4086

บทความคนเข้าอ่านวันนี้

จำนวนผู้เยี่ยมชม 892666