顯示數據庫數據以及模板引擎的使用
阿新 • • 發佈: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>
顯示數據庫數據以及模板引擎的使用