大家好,又见面了,我是你们的朋友全栈君。
刚开始,在没有使用这个模板之前,一致都是后台返回一个json的字符串,来在前端自己拼接字符串,不但麻烦,而且费时费力,而且还有时候经常拼接错误!导致了工作效率的延长
js模板的使用
<script type="html" id="temp">
{{if data.flag}}
{{each data.info as value i}}
<tr>
<td><span>{{value.name}}</span></td>
<td><span>{{value.mobile}}</span></td>
<td><span class="color333">{{value.company_name}}</span></td>
<td><span>{{value.linkman}}</span></td>
<td><span>{{value.create_time}}</span></td>
</tr>
{{/each}}
<tr>
<td colspan="5">
共<span>{{data.PageAllNum}}</span>页/第<span>{{data.PageNum}}</span>页
{{if data.prev}}<span onclick='PageJump(this,"{{data.prev}}","{{data.card_section}}")'>上一页</span>{{/if}}
{{if data.next}}<span onclick='PageJump(this,"{{data.next}}","{{data.card_section}}")'>下一页</span>{{/if}}
</td>
</tr>
{{/if}}
</script>
返回的json数据格式
{
"pageNum": 1,
"AllPageNum": 1,
"info": [
{
"id": "35",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
},
{
"id": "8",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
}
],
"flag": true,
"pid": "42"
}
ajax时的代码使用
function PageJump(obj,page,card){
$.ajax({
url:"/admin.php/User/vip_people_card",
type:"GET",
data:{PageNum:page,card_section:card},
dataType:"json",
success:function(msg){
console.log(msg);
var html = template('temp', {data: msg});
$(obj).parents('.tbody').html(html);
}
})
}
注:
中的temp必须和
这个保持一致,type也不能为空,也不可以为”text/javascript”
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/166944.html原文链接:https://javaforall.cn