penven

博客园 首页 新随笔 联系 订阅 管理
  22 随笔 :: 0 文章 :: 0 评论 :: 11万 阅读

刚开始,在没有使用这个模板之前,一致都是后台返回一个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>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{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"

 

posted on   penven  阅读(587)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目
点击右上角即可分享
微信分享提示