顯示數據庫數據以及模板引擎的使用
阿新 • • 發佈：2018-06-24
樣式 asc 信息 新建 OS set 實現 src []
思路分析
文件地址：鏈接：https://pan.baidu.com/s/1QxHoYfsFXERLmqT1tMbo7Q 密碼：y89a
樣式效果：
分析：
①實現這個效果，我們一般需要2個頁面，一個html頁面，用來瀏覽器顯示；一個PHP頁面，用來接收數據庫數據，並且把接受來的數據返回到前端。
②這時，我們一般需要三個步驟：第一，使用ajax發送請求；第二，在PHP頁面獲取數據庫數據，將數據庫的數據返回給前端；第三，前端接收後端返回
的數據，使用模板引擎，將數據按照表格的樣式顯示出來。
代碼實現
1、先新建demo.html文件，並且創建好表頭：
代碼如下：
<table border="1" align="center" cellspacing="0"> <caption><h1>學生數據管理</h1></caption> <thead> <tr> <th>學號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>郵箱</th> <th>電話</th> </tr> </thead> <tbody> </tbody> </table>
2、發送ajax請求到demo.php頁面
<script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 檢測代碼正確性 },‘json‘) </script>
此時demo.php文件返回測試代碼：
<?php echo 123; ?>
3、demo.php操作數據
<?php // echo 123; // 鏈接MySQL服務器 $conn = mysqli_connect(‘localhost‘,‘root‘,‘root‘); // 選擇要操作的數據庫 mysqli_select_db($conn,‘study‘); // 設置字符集 mysqli_query($conn,‘set names utf8‘); // 拼接SQL語句 $sql = "select * from hf"; // 執行SQL語句 $result_obj = mysqli_query($conn,$sql); $arr = []; while($row=mysqli_fetch_assoc($result_obj)) { array_push($arr,$row); // 將數組一條一條追加到$arr後面 } echo json_encode($arr); // 關閉MySQL鏈接 mysqli_close($conn); ?>
4、前端接收返回的數據，轉化為json格式
<script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 測試 },‘json‘) </script>
5、使用模板引擎，將數據添加到table中
// 引入jQuery和template庫文件 <script src="./jquery.1.11.js"></script> <script src="./template-web.js"></script> //定義模板 <script type="text/template" id="tpl"> <% for ( i = 0; i < list.length; i++) {%> <tr> <td><%=list[i].sno%></td> <td><%=list[i].sname%></td> <td><%=list[i].sage%></td> <td><%=list[i].sgender%></td> <td><%=list[i].semail%></td> <td><%=list[i].stel%></td> </tr> <% } %> </script> <script type="text/javascript"> $.post(‘demo.php‘,function(msg){ console.log(msg); // 轉化為二維數組 var list = { "list": msg}; // 調用模板 var html = template(‘tpl‘,list); // 添加到tbody中 $(‘tbody‘).html(html); },‘json‘) </script>
結果如下：
總結
artTemplate模板引擎
-
使用script標簽引入arttemplate庫文件
-
定義標簽，用來顯示最終解析好的模板信息
-
定義模板和模板中所需數據。
? ① 定義要顯示在模板中的數據，必須是 json 對象
? ② 使用script標簽定義模板，type="text/template" id="tpl"，並且使用 <%=key%> 將所有數據位置標記出來
-
調用template函數，解析模板
-
將解析好的模板字符串填充到事先定義好的標簽中(顯示到網頁上)
<head>
<--1\使用script標簽引入arttemplate庫文件-->
<script type="text/javascript" src="./template-web.js"></script>
</head>
<body>
<--2\定義標簽，用來顯示最終解析好的模板信息-->
<div id="d"></div>
<--4/調用template函數，解析模板-->
<script type="text/template" id="tpl">
我是<%=name%>,今年<%=age%>歲
</script>
<--3\定義模板和模板中所需數據-->
<script type="text/javascript">
// 定義數據
var info = {"name":"張三","age":23};
//定義模板
var str = template(‘tpl‘,info);
// 將解析好的模板字符串（str），寫入到網頁的div中
document.getElementById(‘d‘).innerHTML = str;
</script>
</body>
</html>
顯示數據庫數據以及模板引擎的使用