1. 程式人生 > >php 如何將數據庫中的數據以表格的形式打印到html頁面

php 如何將數據庫中的數據以表格的形式打印到html頁面

dex doc 什麽 base lec oot async 初始化 all

需要兩個頁面:顯示表格的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”,所以必須經過這一步

php 如何將數據庫中的數據以表格的形式打印到html頁面