Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > บทความจากสมาชิก > jQuery Load แสดงข้อมูล Real-Time / Ajax จาก Database ของ PHP และ MySQL Database

jQuery Load แสดงข้อมูล Real-Time / Ajax จาก Database ของ PHP และ MySQL Database

jQuery Load แสดงข้อมูล Real-Time / Ajax จาก Database ของ PHP และ MySQL Database เทคนิคการเขียน jQuery ให้ดึงข้อมูลจาก Database แบบ Realtime ไม่ใช่เรื่องใหม่ แค่คิดว่าหลาย ๆ คนคงจะยังไม่รู้ วิธีโหลดข้อมูลแบบ Realtime โดยที่ไม่ต้องทำการ Refresh ข้อมูล ซึ่งจะอาศัยเทคนิคการเขียน jQuery ร่วมกับ Ajax ส่วนข้อมูลนั้นจะใช้ JSON เป็นตัวส่งรับ-ส่งข้อมูล

jQuery Ajax load Realtime (PHP/MySQL)

สำหรับวิธีการนั้นก็คือ จะใช้ JavaScript และ jQuery ทำงานเป็น Loop โดยทิ้งระยะห่างประมาณ 10-20 วินาที หรือมากกว่านั้น ในการที่จะไปโหลดข้อมูลจาก Server โดยใช้ Ajax ทำงานอยู่เบื้องหลัง ซึ่งวิธีนี้ผู้ใช้ไม่ต้องทำการ Refresh หน้าจอ เพียงแต่เปิดหน้าจอทิ้งไว้เท่านั้น และเมื่อมีข้อมูลใหม่ ๆ ตัว Ajax ก็จะไปดึงข้อมูลจาก Server มาแสดงในหน้าจอ

customer

CREATE TABLE `customer` (
  `CustomerID` varchar(4) NOT NULL,
  `Name` varchar(50) NOT NULL,
  `Email` varchar(50) NOT NULL,
  `CountryCode` varchar(2) NOT NULL,
  `Budget` double NOT NULL,
  `Used` double NOT NULL,
  PRIMARY KEY  (`CustomerID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
-- 
-- dump ตาราง `customer`
-- 
 
INSERT INTO `customer` VALUES ('C001', 'Win Weerachai', 'win.weerachai@thaicreate.com', 'TH', 1000000, 600000);
INSERT INTO `customer` VALUES ('C002', 'John  Smith', 'john.smith@thaicreate.com', 'UK', 2000000, 800000);
INSERT INTO `customer` VALUES ('C003', 'Jame Born', 'jame.born@thaicreate.com', 'US', 3000000, 600000);
INSERT INTO `customer` VALUES ('C004', 'Chalee Angel', 'chalee.angel@thaicreate.com', 'US', 4000000, 100000);

โครงสร้างของ MySQL ชื่อตารางว่า customer

jQuery Ajax Realtime

getData.php (PHP) เป็นไฟล์สำหรับอ่านข้อมูลจาก Database โดยไฟล์นี้จะถูกเรียกใช้โดย Ajax

<?php
    $objConnect = mysql_connect("localhost","root","root") or die(mysql_error());
    $objDB = mysql_select_db("mydatabase");
    $strSQL = "SELECT * FROM customer WHERE 1 ORDER BY CustomerID DESC ";
    $objQuery = mysql_query($strSQL) or die (mysql_error());
    $intNumField = mysql_num_fields($objQuery);
    $resultArray = array();
    while($obResult = mysql_fetch_array($objQuery))
    {
        $arrCol = array();
        for($i=0;$i<$intNumField;$i++)
        {
            $arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
        }
        array_push($resultArray,$arrCol);
    }
     
    mysql_close($objConnect);
     
    echo json_encode($resultArray);
?>

เมื่อทดสอบเรียกไฟล์โดยตรง จะได้ข้อมูลในรูปแบบของ JSON

index.php (PHP) ไฟลืหลักของเว็บ มีหน้าที่ดึงข้อมูลมาแสดงแบบ Realtime

<!DOCTYPE html>
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<script>
   
function getDataFromDb()
{
    $.ajax({ 
                url: "getData.php" ,
                type: "POST",
                data: ''
            })
            .success(function(result) { 
                var obj = jQuery.parseJSON(result);
                    if(obj != '')
                    {
                          //$("#myTable tbody tr:not(:first-child)").remove();
                          $("#myBody").empty();
                          $.each(obj, function(key, val) {
                                    var tr = "<tr>";
                                    tr = tr + "<td>" + val["CustomerID"] + "</td>";
                                    tr = tr + "<td>" + val["Name"] + "</td>";
                                    tr = tr + "<td>" + val["Email"] + "</td>";
                                    tr = tr + "<td>" + val["CountryCode"] + "</td>";
                                    tr = tr + "<td>" + val["Budget"] + "</td>";
                                    tr = tr + "<td>" + val["Used"] + "</td>";
                                    tr = tr + "</tr>";
                                    $('#myTable > tbody:last').append(tr);
                          });
                    }
 
            });
 
}
 
setInterval(getDataFromDb, 10000);   // 1000 = 1 second
</script>
</head>
<body>
 <center>
<h1>My Web</h1>
 
<table width="600" border="1" id="myTable">
<!-- head table -->
<thead>
  <tr>
    <td width="91"> <div align="center">CustomerID </div></td>
    <td width="98"> <div align="center">Name </div></td>
    <td width="198"> <div align="center">Email </div></td>
    <td width="97"> <div align="center">CountryCode </div></td>
    <td width="59"> <div align="center">Budget </div></td>
    <td width="71"> <div align="center">Used </div></td>
  </tr>
</thead>
<!-- body dynamic rows -->
<tbody id="myBody"></tbody>
</table>
 
 <center>
</body>
</html>

หลักการก็คือไฟล์นี้จะใช้ jQuery ดึงข้อมูลแบบ Ajax จากไฟล์ getDate.php จากนั้นเมื่อได้ข้อมูลกลับมที่อยู่ในรูปแบบของ JSON ก็จะทำการ Loop ค่าและแสดงค่าใน Table (จากตัวอย่างจะดึงข้อมูลทุก ๆ 10 วินาที สามารถเพิ่มหรือปรับความเร็วตามต้องการได้)

Screenshot

jQuery Ajax Realtime

แสดงข้อมูลแบบ Realtime

ทดสอบการเพิ่มข้อมูลใหม่

jQuery Ajax Realtime

ทดสอบเพิ่มผ่าน phpMyAdmin

jQuery Ajax Realtime

ข้อมูลจะแสดงหน้าเว็บอัตโนมัติ

บทความที่เกี่ยวข้อง
Go to : Ajax: Real Time - Display data Real-time
Go to : jQuery Ajax กับ JSON (Web Service) ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax


	By :	TC Admin
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2013-07-21
	Download :	No files

Sponsored Links

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว

Hit Link

ShotDev

แลกเปลี่ยน Exchange Link

Registered : 109,038

jQuery Load แสดงข้อมูล Real-Time / Ajax จาก Database ของ PHP และ MySQL Database