当前位置: 首页>编程语言>正文

大数据表如何显示在Android 大数据显示模板

思路分析

样式效果:

大数据表如何显示在Android 大数据显示模板,大数据表如何显示在Android 大数据显示模板_mysql,第1张

分析:

①实现这个效果,我们一般需要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;
?>



大数据表如何显示在Android 大数据显示模板,大数据表如何显示在Android 大数据显示模板_mysql_02,第2张

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>



结果如下:

大数据表如何显示在Android 大数据显示模板,大数据表如何显示在Android 大数据显示模板_大数据表如何显示在Android_03,第3张

 

总结

artTemplate模板引擎

基本使用步骤:

  1. 使用script标签引入arttemplate库文件
  2. 定义标签,用来显示最终解析好的模板信息
  3. 定义模板和模板中所需数据。
    ① 定义要显示在模板中的数据,必须是 json 对象
    ② 使用script标签定义模板,type="text/template" id="tpl",并且使用 <%=key%> 将所有数据位置标记出来
  4. 调用template函数,解析模板
  5. 将解析好的模板字符串填充到事先定义好的标签中(显示到网页上)
<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>



 



https://www.xamrdz.com/lan/55z1962675.html

相关文章: