要使用支持原生js的插件:

代码截图: json数据

{
"list": [
{
"name": "学历层次",
"item": [
"博士",
"硕士",
"本科",
"专科"
]
},
{
"name": "门类",
"item": [
"哲学",
"法学",
"教育学",
"文学",
"历史学",
"理学"
]
},
{
"name": "学科",
"item": [
"经济学类",
"财政学类",
"金融学类",
"经济与贸易学类"
]
},
{
"name": "专业",
"item": [
"电子信息与科学",
"经济学",
"经济统计学",
"国民经济",
"能源经济"
]
},
{
"name": "院校层次",
"item": [
"教育部",
"其它中央部委",
"地方所属"
]
},
{
"name": "院校层次",
"item": [
"教育部",
"其它中央部委",
"地方所属"
]
},
{
"name": "院校特色",
"item": [
"985",
"211",
"研究生院校"
]
}
]
} 运用模板
<script id="test" type="text/html">
<%for( i = 0; i < list.length; i++) {%>
<ul>
<%for( j = 0; j < list[i].item.length; j++) {%>
<li> <%=list[i].item[j]%></li>
<%}%>
</ul>
<%}%>
</script> ajax请求:
$(".btn").click(function(){
$.ajax({
type:"POST",
url:"../../js/info.json",
dataType: "json",
success: function(data){
var html = template('test',data);
$("#date").html(html);
}
});
})

arttemplate模板引擎里面多层循环的更多相关文章

  1. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  2. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  3. artTemplate模板引擎

    artTemplate模板引擎         <li>索引 {{i + 1}} :{{value}}</li>     {{/each}} </ul> </ ...

  4. smarty模板引擎中section循环loop与total的区别

    在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start= ...

  5. Node学习之(第三章:art-template模板引擎的使用)

    前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...

  6. Express 中配置使用 art-template模板引擎

    art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...

  7. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  8. artTemplate模板引擎的源码拜读

    最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到 ...

  9. 第115天:Ajax 中artTemplate模板引擎(一)

    一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...

随机推荐

  1. web前端学习基础知识(1)

    下载Atom插件和主题安装和配置 1.官网 https://atom.io/ 2.百度网盘上http://pan.baidu.com/s/1ntszCgT 安装subline以及插件的安装,再去了解它 ...

  2. JS 封装一个求n~m的求和函数

    var a = 0;    cc(2,10);    function cc(n,m){        for(var i =n;i<(m+1);i++){            a = a + ...

  3. CSS - Span 下的width设置不可用?

    解决:Span 下的width设置不可用? 内联元素-span有根据内容自动伸缩的能力,当需要对其宽度设定时,出现无效的情况. Demo:http://jsfiddle.net/JSDavi/ad62 ...

  4. 训练1-K

    一个整数,只知道前几位,不知道末二位,被另一个整数除尽了,那么该数的末二位该是什么呢? Input 输入数据有若干组,每组数据包含二个整数a,b(0<a<10000, 10<b< ...

  5. MySQL 获取无限级某级的全路径

    传递参数:文件夹ID DROP FUNCTION IF EXISTS RecursionFolderFullPath; CREATE FUNCTION RecursionFolderFullPath( ...

  6. failed to sync branch You might need to open a shell and debug the state of this repo.

    failed to sync branch You might need to open a shell and debug the state of this repo. i made some c ...

  7. Android Activity组件的启动过程

    0.总图 1.总图中的第一步,Laucher主线程向ActivityManagerService进程发出START_ACTIVITY_TRANSACTION 如图:第一步 ~/Android/fram ...

  8. BroadcastReceiver类

    java.lang.Object    ↳ android.content.BroadcastReceiver 已知直接子类 AppWidgetProvider DeviceAdminReceiver ...

  9. wpf 全局异常捕获处理

    /// <summary> /// App.xaml 的交互逻辑 /// </summary> public partial class App : Application { ...

  10. ftk学习记(首篇)

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 非常早之前就知道ftk了,当时主要是由于买了李先静的书,所以知道了这么一个项目.由于对这样的g ...