$.ajax({
url:'http://10.162.12.85:8080/api/info?code=bingbing2&type=1',
type:'get',
dataType: 'json',
success:function (res) {
// 设置车牌号
if (res.info.navicerts.length !=0) {
$('#car-number').html(res.info.vehicle.plateNumber);
// ajax中调用模版
var html = template('allow-list', res.info);
$('.allow-info-wrapper').append(html);
// 控制准运证信息的展开
for (var i=0; i<=res.info.navicerts.length; i++) {
(function(i) {
$('#collapse-btn'+i).toggle(function(){
$('#allow-list-wrapper'+i).hide();
$('#layui-icon'+i).html('');
},function(){
$('#allow-list-wrapper'+i).show();
$('#layui-icon'+i).html('');
});
})(i);
};
} else { // 没有数据
$('#tips').show();
}
// js中设置html模版
<script type="text/html" id="allow-list">
{{ each navicerts as value i }}
<div class="allow-info-inner">
<div id="allow-info" class="allow-info" style="margin-top: 2px;">
<h4>准运证信息{{i+1}}</h4>
<span id="collapse-btn{{i}}"><i class="layui-icon" id="layui-icon{{i}}"></i></span>
</div>
<ul class="lists" id="allow-list-wrapper{{i}}" style="margin-top: 1px;">
<li><h4>准运证编号</h4> <span>{{value.cardId}}</span></li>
<li><h4>运输单位</h4> <span>{{value.unit}}</span></li>
<li><h4>负责人</h4> <span>{{value.contacts}}</span></li>
<li><h4>电话</h4> <span>{{value.phone}}</span></li>
<li><h4>有效日期</h4> <span>{{value.validStartTime}} - {{value.validEndTime}}</span></li>
{{ if value.navicertStatus == 0 }}
<li><h4>准运证状态</h4> <span style="color:grey;font-weight: 600;">已失效</span></li>
{{ else if value.navicertStatus == 1 }}
<li><h4>准运证状态</h4> <span style="color:red;font-weight: 600;">生效中</span></li>
{{ /if }}
</ul>
</div>
{{ /each }}
</script>
// html中待插入的结构
<!-- 准运证信息 -->
<div class="allow-info-wrapper"></div>