laytpl 的模板可与数据分离，集中把逻辑处理放在 View 层，提升代码可维护性，尤其是针对大量模板渲染的情况。
有些后台只提供了API接口,返回json数据,这时可以用前端是模板引擎来处理
收藏
后台:
<?php
namespace app\index\controller;
use think\controller;
class Index extends controller
{
public function index()
{
return $this->fetch();
}
public function getData(){
$data = ['title'=>'标题','list'=>[['modname'=>'表单','alias'=>'form','site'=>'www,baidu.com'],['modname'=>'弹出','alias'=>'layout']]];
header('Content-Type:application/json; charset=utf-8');
exit(json_encode($data));
}
}
前端:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/Public/js/jquery-2.2.1.min.js"></script> //引入jquery
<script src="/Public/layui/layui.js"></script> //引入layui.js
</head>
<body>
<!-- 下面这个地方是模板 -->
<script id="demo" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}：</span>
<span>{{ item.site || '' }}</span> //存在就显示item.site,不存在就为空
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</ul>
</script>
<!-- 下面这个div是模板要填充的 -->
<div id="view"></div>
</body>
<script type="text/javascript">
$(function(){
//ajax请求数据
$.ajax({
url:"{:url('index/getData')}",
type:'POST',
dataType:'json',
success:function(data){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('加载成功');
});
layui.use('laytpl', function(){ //使用模板时要加载模板
var laytpl = layui.laytpl;
var getTpl = demo.innerHTML;
var view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
view.innerHTML = html;
});
});
}
});
});
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
