1. 程式人生 > >php 如何將資料庫中的資料以表格的形式列印到html頁面

php 如何將資料庫中的資料以表格的形式列印到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”,所以必須經過這一步