我一定写了一个假的技术博客
当前位置: 首页>> 技术宅 >> 正文

使用JSON格式数据填充HTML模板简要实现

2018年01月07日 4 条评论 ... 技术宅 /

设计网站初期,整体架构可以选择使用前台模板后台返回 json 格式数据的形式,前端使用 javascript 进行解析并且填充,这样做的好处非常明显,使用 json 格式的数据,前端页面与数据的粘度变小,可以方便更换页面样式,同时,这样做可以方便移植平台,比如说以后 WEB 端应用要改成客户端应用,则后台代码部分几乎不需要修改。

使用 json 格式的数据填充 HTML 的基本实现可以描述为:1、控制后台返回 json 格式数据;2、设置前端自定义匹配和替换规则;3、使用 javascript 对 json 数据解析并且填充页面。

控制后台返回 json 格式数据

这里以 thinkphp 5.x 版本的 PHP 框架为例,只需要将 return $this->fecth(); 换成 return json($data); 即可,其中变量 $data 为实际要返回的数据,这里需要注意的是,为了方便前台处理,建议对数据进行命名分类处理,例如如下代码:

  1. public function view2($start = 1,$length = 10){  
  2.     $say = new Say;  
  3.     $list = $say->limit($start,$length)->select();  
  4.     $count = $say->count();  
  5.     $data['data'] = $list;  
  6.     $data['count'] = $count;  
  7.     return json($data);  

如上程序获得的数据格式如下:

{"data":[{"sayid":9,"sayname":"123","sayto":"345","saytime":"1970-01-01","sayip":null,"sayimg":null,"saycontent":"112344"}],"count":1}

设置前端自定义匹配和替换规则

要想将 json 数据填充入 HTML 中,就如种树一般,一个坑一棵树,而且规定大坑种大树,小坑种小树,所以,需要设置替换规则。可以选择使用特殊字符将替换的关键词括起来,方便 javascript 处理,比如使用两个 $ 符号括起来。

  1. <div class="main"> 
  2.     <script type="text/template" id="tpl_main"> 
  3.         <div class="box"> 
  4.             <div class="sy_content"> 
  5.                 <div class="toer">$to$</div> 
  6.                 <div class="mid">$content$</div> 
  7.                 <div class="sayer">$sayer$</div> 
  8.                 <div class="time">$time$</div> 
  9.             </div> 
  10.         </div> 
  11.     </script> 
  12. </div> 

代码中,主要模板部分使用 script 标签套起来,且 type 标签设置为 “text/template”是为了与正常的 js 代码区分,其实只要能够方便 javascript 取到元素怎么做都可以,根据自己的需要决定。

填充数据

这里使用 jquery 库来处理。基本步骤是,请求到数据后,首先取 script 标签套的关键模板,然后循环 json 数据,并且将 json 中的数据逐条逐个填补模板中的“坑”,填充的方法是使用了 replace(),并且将循环的结果串起来,最后输出到页面上。

  1. <script>  
  2. $(function() {  
  3.     $.get('__ROOT__/getdate.php', function(data) {  
  4.         var template = '';  
  5.         template = $('.main script').html();  
  6.         var newtpl = '';  
  7.         var tpl = '';  
  8.         $.each(data.data, function(index, val) {  
  9.              tpl = template.replace(/\$to\$/g,val.sayto).replace(/\$content\$/g,val.saycontent).replace(/\$sayer\$/g,val.sayname).replace(/\$time\$/g,val.saytime);  
  10.              newtpl = newtpl+tpl;  
  11.         });  
  12.         $('.main').html(newtpl);  
  13.     });  
  14. });  
  15. </script> 

代码中 replace() 函数中第一个参数使用的正则匹配,以斜杠开始,以斜杠结束,中间的 $ 符号由于属于敏感字符,各在前面加上了反斜杠转义。

 

后续的开发,如果需要编写模板,只需要约定了替换关键词和符号,以及模板的位置id,就可以了。

以上代码参考 The__Flash 的相关教程,谨此表示感谢。

版权保护: 本文由 唐野 原创,转载请保留链接: http://www.yelook.com/2152.html

       
立即打赏(免费打赏)
限时免费打赏系支付宝活动,支付宝扫码后双方均可获得红包奖励,扫码获得的红包有效期3日,每日可领取一次。
  • 限时活动

  • 支付宝打赏

  • 微信打赏

  • 如果这篇文章对您有帮助,欢迎点击上方按钮给我打赏。

    4 条吐槽

    Loading...
    1. 姜辰

      那时间会不会变长?= =万一被恶意请求啥的?

      2018-01-7 [回复]
      • 有野出没

        网速慢的效果就是先出来一个空的页面,然后出数据,毕竟模板跟数据两条路来的。被恶意请求的话,就算不是json返回也可能被恶意请求。

        2018-01-8 [回复]
    2. IF

      看了你上上篇博客 我又开始玩迷你世界了感觉有个终身的游戏挺好的

      2018-01-7 [回复]
      • 有野出没

        迷你世界跟我的世界是一个类型的游戏吧

        2018-01-8 [回复]

    发布评论