最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错。今天自己玩了一下

后台使用的是.net mvc,数据库脚本就不提供了,返回的JsonResult,将数据存放在data中,前台通过ajax配合模板引擎进行一个调用然后以表格的形式显示数据。

前台html代码:

<a href="#" onclick="GetData()">获取数据</a>
<table class="table">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>说明</td>
</tr>
<tbody id="tb"> </tbody>
</table>

js代码:当然首先你得先导入art-template.js 下载地址:http://aui.github.io/art-template/

重点来说说这里:

首先第一步:加载art-template.js的文件

第二步:定义模板引擎并在里面进行数据的加载吧(个人理解),在网上也找了一下资料,说script type的值不能是text/script,不然会造成无法解析。也就是说除开text/script应该都可以,这里我用的是text/template(原谅我不去度娘)。

第三步:就是处理请求回来的数据怎么显示了,先来看看ajax请求成功后我直接将data存放在template作为第二个参数,第一个参数对应定义模板引擎的id通过最后var去接收。完了以后就是在模板引擎中进行渲染,这里通过each data,这是一种标准语法吧,就好比之前通过模板字符串拼接的一个升级版,当然可能好处更多。data就是后台返回回来的json数据,

通过{{$(value)}}的方式去拿到对应的数据,这样看来比以前foreach循环然后拼接字符串真的好太多,后期维护也比较好。

<script src="~/resources/art-template.js"></script>
<script type="text/template" id="tbdata">
{{each data}}
<tr>
<td>{{$value.Name}}</td>
<td>{{$value.Age}}</td>
<td>{{$value.Desc}}</td>
</tr>
{{/each}}
</script>
<script>
function GetData() {
$.ajax({
type: "post",
url: "/Test/Index",
data: {},
success: function (data) {
var result = template('tbdata', data);
$("#tb").html(result);
}
});
}
</script>

后台代码:这里通过ef从数据库加载数据

public class TestController : Controller
{
testDBEntities db=new testDBEntities();
// GET: Test
[HttpPost]
public JsonResult Index()
{
var datas = db.Tests.ToList();
return Json(new { data = datas });
} }

最后的显示效果:

第一次玩模板引擎,希望以后会有更多的认识。

ajax配合art-template模板引擎的使用的更多相关文章

  1. Django基础,Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  2. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  3. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  7. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

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

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

  9. Ajax概述,封装以及联合模板引擎进行数据交互

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...

随机推荐

  1. (一)HttpClient Get请求

    原文链接:https://blog.csdn.net/justry_deng/article/details/81042379 HttpClient的主要功能: 实现了所有 HTTP 的方法(GET. ...

  2. CentOS Linux release 7.7.1908 (Core)--rabbitmq安装

    1.连接服务器,输入账号和密码,密码输入的时候是看不见的,只管输就行,然后回车. 2.安装Erlang,RabbitMQ是用这门语言写的,所以要安装他. 3.安装filezilia就是win和linu ...

  3. 小师妹学JVM之:GC的垃圾回收算法

    目录 简介 对象的生命周期 垃圾回收算法 Mark and sweep Concurrent mark sweep (CMS) Serial garbage collection Parallel g ...

  4. 使用IntelliJ/Eclipse生成类图

    IntelliJ可以安装一个免费的pugins - Code Iris. PlantUML 在Eclipse中 - ObjectAidPapyrusEclipse Modeling Tools 查看原 ...

  5. java基础 内部类详解

    什么是内部类? 1.内部类也是一个类: 2.内部类位于其他类声明内部. 内部类的常见类型 1.成员内部类 2.局部内部类 3.匿名内部类 4.静态内部类 简单示例 /** * 外部类 * */ pub ...

  6. java scoket aIO 通信

    AsynchronousServerSocketChannel assc.accept(this, new ServerCompletionHandler()); 第一个参数是服务器的处理类,第二个参 ...

  7. Java 多线程基础(十一)线程优先级和守护线程

    Java 多线程基础(十一)线程优先级和守护线程 一.线程优先级 Java 提供了一个线程调度器来监控程序启动后进去就绪状态的所有线程.线程调度器通过线程的优先级来决定调度哪些线程执行.一般来说,Ja ...

  8. JDK8--04:内置接口

    在JDK8--3中已经说过,使用lambda方法需要新增函数式接口,为了使用方便,JDK8已经提供了许多内置接口,总的归纳来说,有四大函数式接口. /** * * java8 四大内置接口 * * 1 ...

  9. 队列的顺序存储与链式存储c语言实现

    一. 队列 1.队列定义:只允许在表的一端进行插入,表的另一端进行删除操作的线性表. 2.循环队列:把存储队列的顺序队列在逻辑上视为一个环. 循环队列状态: 初始时:Q.front=Q.rear=0 ...

  10. css z-index的层级关系

    定义和用法 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素上奏 ...