直接来代码吧！

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <ul id="wrap">

            <script id="tpl" type="text/html">

                <%if(result){%>

                    <%for(var i=0;i<result.length;i++){%>

                        <li><%=result[i].area_name%></li>

                    <%}%>

                <%}%>

            </script>

        </ul>

        <script src="js/jquery/jquery-1.8.3.min.js" ></script>

        <script src="js/template/template.js"></script>

        <script>

            $(function(){

                $.ajax({

                     type: "get",

                     url: "js/json/package.json",

                     data:{//后台需要的参数

                         flag:"wap"

                     },

                     dataType: "json",

                     success: function(data){

//                        var data = {

//                            result: [

//                                {

//                                    area_id: "535",

//                                    area_name: "美国",

//                                    pid: "45055"

//                                },

//                                {

//                                    area_id: "536",

//                                    area_name: "加拿大",

//                                    pid: "45055"

//                                }

//                            ],

//                            error: "0",

//                            msg: "",

//                            total: 0,

//                            hasmore: false

//                        }

                        if (data && data.error === "0") {

                            console.log(data);

                            var html = template.render('tpl',data);

                            $('#wrap').html(html);

                        }

                    }

                });

            });

        </script>

    </body>

</html>
package.json：
{

    "result": [

        {

            "area_id": "535",

            "area_name": "美国",

            "pid": "45055"

        },

        {

            "area_id": "536",

            "area_name": "加拿大",

            "pid": "45055"

        }

    ],

    "error": "0",

    "msg": "",

    "total": 0,

    "hasmore": false

}

需要的js文件就是 template.js和jQuery

（template.js查看文件）！！！！

我是这样使用template.js来异步渲染数据的demo的更多相关文章

  1. 我是这样使用template.js来异步渲染数据的

    总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用 https://github.com/yanhai ...

  2. template.js文档

    参见GitHub:https://github.com/yanhaijing/template.js/ template.js简介: template.js 一款javascript模板引擎,简单,好 ...

  3. 前端-使用template-web.js【模版引擎】渲染数据

    通过ajax请求到的数据,使用传统的拼接字符串也可以做到,但是‘ “ ” ‘这种模式,单引号.双引号容易 扩错,新手入门推荐使用这种,初入前端,需要一个一个敲代码体会一下. 使用 template.j ...

  4. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  5. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  6. js模板（template.js）实现页面动态渲染

    template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...

  7. vue 异步渲染

    <!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...

  8. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  9. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战：异步实现数据双端渲染

    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...

随机推荐

  1. Windows地址空间

    虚拟地址空间 ​ 当处理器读取或写入存储器位置时,它使用虚拟地址.作为读或写操作的一部分,处理器将虚拟地址转换为物理地址.通过虚拟地址访问内存具有以下优势: 程序可以使用连续范围的虚拟地址来访问在物理 ...

  2. 【线性基】51nod1312 最大异或和&LOJ114 k大异或和

    1312 最大异或和 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题   有一个正整数数组S,S中有N个元素,这些元素分别是S[0] ...

  3. bzoj4292 PA2015 Równanie 枚举

    貌似应该是找出n后,带回去看看是不是对的. #include<cstdio> #include<cstring> #include<algorithm> #incl ...

  4. nodeJS学习（8）--- WS/...开发 NodeJS 项目-节3 <使用 mongodb 完整实例过程>

    使用 mongodb 的小系统 参考:https://my.oschina.net/chenhao901007/blog/312367 1. Robomongo 创建项目的数据库和数据表 参考:htt ...

  5. react之只用classNames避免字符串拼接

    之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题 使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率 首先,最简单的使用方 ...

  6. USACO 刷题记录bzoj

    bzoj 1606: [Usaco2008 Dec]Hay For Sale 购买干草——背包 #include<cstdio> #include<cstring> #incl ...

  7. Android驱动之 Linux Input子系统之TP——A/B(Slot)协议【转】

    转自:http://www.thinksaas.cn/topics/0/646/646797.html 将A/B协议这部分单独拿出来说一方面是因为这部分内容是比较容易忽视的,周围大多数用到input子 ...

  8. 转：C#制作ORM映射学习笔记三 ORM映射实现

    现在开始实现ORM的主体模块,首先需要在项目中新建一个类,命名为DbAccess,然后在项目的引用中添加两个dll,分别是MySql.Data.dll和System.Data.SQLite.dll,这 ...

  9. 【原创】设置EXCEL2010打开多个独立窗口

            最近发现一个奇怪的问题,发现office中的word和ppt在我使用笔记本分屏幕(双屏)的时候都可以将2份文档分别在2个窗口打开,但是在使用excel的时候却发现不行,最后研究发现原因 ...

  10. C# 数组与 list 互相转换案例

    在项目中用到了 随手分享下 记得点赞呦! 1,从System.String[]转到List<System.String>System.String[] str={"str&quo ...