php 如何将数据库中的数据以表格的形式打印到html页面

最新推荐文章于 2022-04-08 14:22:29 发布

didimeng2054

最新推荐文章于 2022-04-08 14:22:29 发布

阅读量1.8k

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/xwenbin/p/10223638.html

版权

需要两个页面：显示表格的html页面index.html（页面内包含js），进行后台处理的php页面index.php

html页面部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
//首先要引入jquery
<script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
//然后引入本页面js
<script type="text/javascript" src="js/index.js"></script>
</head>

<body>
<table id="tab"></table>
</body>
</html>

php页面部分：

<?php
//连接数据库
$db=new MySQLi('localhost','root','root','database');
!mysqli_connect_error() or die('连接失败');
$db->query('set names utf8');
//写sql命令语句
$sql="select * from table";
//执行sql命令
$res=$db->query($sql);
//将提出的数据转换成数组
$attr=$res->fetch_all();
//执行方法，把数组转换成字符串，并输出
echo ArrToStr($attr);

//方法：数组转字符串
function ArrToStr($arr){
   $brr=array();
//将每个字符用“，”和“^”隔开
   foreach($arr as $v){
       $brr[]=implode(',',$v);
   }
   return implode('^',$brr);
}
?>

js部分：

var tabData="";//定义一个空变量用来存放数据
//ajax获取数据
$.ajax({
       async:false,
       url:'index.php',
       data:{},
       type:'get',
       dataType:'text',
       success:function(data){
       tabData=data;
       }
});
//页面加载完成后执行
$(function(){
//初始化变量
   initVar();
//请求数据，并执行方法将字符串转换成数组
   StrToArr(tabData);
})
//方法：初始化变量
function initVar(){
   tabDom=$('#tab');
}
//方法：字符串转数组
function StrToArr(str){
//将在php里加的“，”和“^”去掉，并转成数组
   var arr=str.split('^');
   var brr=[];
   for(var i in arr){
       brr.push(arr[i].split(','));
   }
//调用方法：打印表格
   initHtml(brr);
}
//方法：打印表格
function initHtml(arr){
   for(var i in arr){
       str+=`<tr>`;
       for(var j in arr[i]){
           str+=`<td>`+arr[i][j]+`</td>`;
       }
       str+=`</tr>`;
   }
   $('#tab').html(str);
}

为什么要将php提出的数据转换成字符串，ajax接受后再将字符串转换成数组？
因为此处ajax接受的数据类型为“text”，所以必须经过这一步

转载于:https://www.cnblogs.com/xwenbin/p/10223638.html

didimeng2054

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
php 如何将数据库中的数据以表格的形式打印到html页面

需要两个页面：显示表格的html页面index.html（页面内包含js），进行后台处理的php页面index.phphtml页面部分：<!doctype html><html><head><meta charset="utf-8"><title>表格</title>//首先要引入jquery<script t...
复制链接

扫一扫