整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

如何用PHP将数据库中的数据实时显示在网页上?

如何用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模块进行渲染,代码如下

<ul class="productContainer">

{{each product prod}}

<li>

<input type="text" value="{{prod.id}}">

<img src="{{prod.img}}"/>

<p>{{prod.title}}</p>

<span>¥{{prod.price}}</span>

<a href="javascript:void(0)">加入购物车</a>

</li>

{{/each}}

</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.'<br />';

}