如何用PHP將數據庫中的數據實時顯示在網頁上？

在PHP中實時將數據庫中的數據顯示在網頁上，您可以使用Ajax和PHP進行無刷新更新。Ajax這個術語源自描述從基于Web的應用到基于數據的應用，它不是一種新的編程語言，而是一種用于創建更好更快以及交互性更強的Web應用程序的技術。Ajax在瀏覽器與Web服務器之間使用異步數據傳輸，這樣就可以使網頁從服務器請求少量的信息，而不是整個頁面。下面是一個簡單的示例：

1.在您的HTML文件中，創建一個div元素來顯示數據庫中的數據。

<div id="data-container"></div>

2.在PHP文件中，編寫一個從數據庫中檢索數據的腳本來返回數據并將其插入到HTML文件中。

<?php  
// 連接到數據庫  
// ...  
  
// 從數據庫中檢索數據  
$data=// ... 查詢語句 ...;  
  
// 將數據插入到HTML文件中  
$html='<p>'.implode('<br>', $data).'</p>';  
  
// 輸出有意義的HTTP頭部  
header('Content-type: text/html');  
  
// 輸出HTML文件中的數據  
echo $html;  
?>

3.在您的JavaScript文件中，使用Ajax技術調用PHP腳本并將結果插入到div元素中。

function updateData() {  
    // 創建Ajax請求  
    var xhttp=new XMLHttpRequest();  
    xhttp.onreadystatechange=function() {  
        if (this.readyState==4 && this.status==200) {  
            // 更新頁面上的數據容器  
            document.getElementById("data-container").innerHTML=this.responseText;  
        }  
    };  
    // 調用PHP腳本并傳遞參數（如果有的話）  
    xhttp.open("GET", "get_data.php", true);  
    xhttp.send();  
}  
// 每隔一段時間調用updateData()函數以獲取新數據  
setInterval(updateData, 1000);

這樣，每當指定的時間間隔過去時，JavaScript文件就會通過Ajax調用PHP腳本，獲取最新的數據并將其插入到HTML文件中的指定位置。

電商網站搭建過程中，前端經常會向后端請求數據，有時候通過HTML、JS和PHP文件的處理來實現數據的連通。通常情況下，用戶在HTML中做關鍵字操作，JS對提交的表單進行數據處理，向后端發起ajax請求對應PHP的api接口，PHP在接收到數據后對連接服務器，服務器再通過PHP中的SQL語句對數據庫關鍵字進行處理返回給PHP，再由PHP返回給前端，前端通過JS處理將數據渲染在HTML中，最終呈現給用戶。圖1為數據傳輸流程圖：

圖1 HTML、JS與PHP之間的數據傳輸流程圖

以加入商品到購物車為例，本例為模擬數據，和實際的數據庫的數據不同。

圖2 商品列表

加入購物車的點擊事件大致步驟為：用戶點擊"加入購物車"按鈕==>頁面獲取當前商品唯一值（如商品ID：productID）==>JS處理點擊事件，將唯一值連同用戶信息通過ajax請求傳送給PHP===>PHP向服務器請求連接===>數據庫語句執行===>服務器將執行結果返回給PHP===>PHP將執行結果傳送給前端。

如果數據庫語句執行成功，那么數據庫中該用戶的購物車表就多了一項剛加入的商品數據，同時服務器也會向PHP返回執行成功信息（及一條不為空的數據串），而用戶的界面就會顯示"成功加入購物車"等字樣（如圖1-1所示）；若執行失敗，也會將失敗信息（err）傳給PHP，用戶界面也會顯示相應的提示，如圖3所示。

圖3 成功加入購物車提示

1. HTML中的代碼實例，商品列表信息通過引入art-template模塊進行渲染，代碼如下

<li>

{{prod.title}}

￥{{prod.price}}

<a href="javascript：void(0)">加入購物車</a>

</li>

</ul>

2. JS中的數據請求處理實例如下,加入購物車的請求的api文件路徑為http://localhost/api/add.php，此時將點擊加入的商品ID及操作的用戶ID封裝為對象，用ajax的post請求傳給服務端

$(".productContainer").on("click", ".add", function () {

var productID=$("#prodID").val()；//獲取到當前商品的ID值

$.post("http://localhost/api/add.php", {productID:productID,userID},

function (data) {

if (data.res_code===1) { //返回的數據中，data.res_code為1表示加入成功

alert("加入成功");//對用戶進行加入成功提示

} else {

alert(data.res_message);//若不為1則表示加入失敗，data.res_message為失敗信息

}

}, "json");

});

3. PHP中的代碼（及JS中所請求的add.php文件）

<?php

// CORS跨域

header("Access-Control-Allow-Origin:*");

/* 向購物車添加商品 */

$productID=$_POST["productID"];

$userid=$_POST["userID"];

// 連接數據庫服務器

mysql_connect("localhost:3306", "root", "");

// 選擇連接數據庫的名稱

mysql_select_db("cart");

// 讀寫庫編碼

mysql_query("set character set utf8");

mysql_query("set names utf8");

// 編寫SQL語句

//若該用戶未添加該商品,則向cartList表插入該商品,并將數量置為1

$sql1="INSERT INTO cartList(productID, userID,count) VALUES ('$productID', '$userID',1)";

//若該用戶已添加該商品,再次添加時只在cartList表中讓該商品的數量+1

$sql2="UPDATE cartList SET count=count+1 WHERE productID='$productID' AND userid='$userID'";

// 執行SQL語句，首先執行sql1的語句，如果表中有相同的數據，則sql1會執行失敗，那么執行sql2

$result=mysql_query($sql1);

if(!$result){

$result=mysql_query($sql2);

}

// 判斷

if ($result) { // 執行成功，將res_code的值設為1，并將返回信息設置為"加入成功"

$arr=array("res_code"=>1, "res_message"=>"加入成功");

echo json_encode($arr);

} else { // 執行失敗，則將res_code設為0，并將錯誤信息設置為"加入失敗"

$arr=array("res_code"=>0, "res_message"=>"加入失敗" . mysql_error());

echo json_encode($arr);

}

// 關閉連接

mysql_close();

4. 當用戶進入購物車時，頁面要請求該用戶在數據庫中的購物車表cartList，此時查詢結果應該為一個數組，數組里的每一個子元素對應一個唯一的商品對象，數據庫查詢語句如下：

// 編寫SQL語句

//在購物車cartList表中找到該用戶已經添加的購物車商品數據的信息

$sql="SELECT * FROM cartList WHERE userID='$userID'";

// 執行SQL語句

$result=mysql_query($sql);

// 新建一個數組用來存查詢出來的結果，每條結果僅有一條商品的信息

$results=array();

// 每次查詢成功,將當前查詢到的商品結果存入results數組中

while($row=mysql_fetch_row($result))

{

$results[]=$row;

}

if ($results) {//返回數組$results，res_code值設為1

$arr=array("res_code"=>1, "res_message"=>$results);

echo json_encode($arr);

}

else { // 查找失敗，返回信息"查找失敗"，res_code值設為0

$arr=array("res_code"=>0, "res_message"=>"查找失敗" . mysql_error());

echo json_encode($arr);

}

關于PHP語法的說明：

mysql_query() 函數執行某個針對數據庫的查詢，每次查詢結果僅有一條數據。

mysql_fetch_row() 從和結果標識 data 關聯的結果集中取得一行數據并作為數組返回。每個結果的列儲存在一個數組的單元中，偏移量從 0 開始。依次調用 mysql_fetch_row() 將返回結果集中的下一行，如果沒有更多行則返回 FALSE。

下代碼用于采集頁面時，獲取網頁中所有的鏈接，并循環輸出：

$html=file_get_contents('http://www.runoob.com');

$dom=new DOMDocument();

@$dom->loadHTML($html);

// grab all the on the page

$xpath=new DOMXPath($dom);

$hrefs=$xpath->evaluate("/html/body//a");

for ($i=0; $i < $hrefs->length; $i++) {

$href=$hrefs->item($i);

$url=$href->getAttribute('href');

echo $url.' ';

}

在線咨詢

上一篇：從民權“空包”案查辦看網絡交易監管-創新實踐河南網
下一篇：Spring MVC+Spring+Mybatis實

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何用PHP將數據庫中的數據實時顯示在網頁上？

您的項目需求