最近才接触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. IDEA优化内存配置,可提高启动和运行速度

    找到IDEA安装的bin目录 打开idea.exe.vmoptions 文件 关键的三个参数的说明 1. -Xms 是最小启动内存参数 2. -Xmx 是最大运行内存参数 3.-XX:Reserved ...

  2. 附017.Kubernetes_v1.17.4 Dashboard部署

    一 Kubernetes dashboard简介 1.1 Web UI简介 dashboard是基于Web的Kubernetes用户界面.可以使用dashboard将容器化应用程序部署到Kuberne ...

  3. Java++:安全|API接口安全性设计

    接口的安全性主要围绕 token.timestamp 和 sign 三个机制展开设计,保证接口的数据不会被篡改和重复调用,下面具体来看: Token授权机制: 用户使用用户名密码登录后服务器给客户端返 ...

  4. ASP.NET处理管道之防盗链

    盗链就是在用户向网站a请求网站资源时,网站a将网站资源的路径填写为b网站资源的地址,用户将直接看到网站a上显示着网站b的资源,从而造成盗链. 要防止盗链,就要用到处理管道中的技术 在相应的模块类中: ...

  5. JavaWeb网上图书商城完整项目--13.项目所需环境的搭建

    1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...

  6. django drf 10大请求序列化方法

    ## 整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py ```python"""1) 单整体改,说明前台要提供修改的数据,那么数据就需要 ...

  7. LeetCode 80,不使用外部空间的情况下对有序数组去重

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第49篇文章,我们一起来看LeetCode的第80题,有序数组去重II(Remove Duplicates fr ...

  8. 设计模式系列之外观模式(Facade Pattern)——提供统一的入口

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  9. 新版MySQL开始使用时遇到的问题(时区、权限):

    新版MySQL(本人Server version: 8.0.15)在刚开始使用时遇到的问题: 查看mysql安装版本:命令窗口 时区问题解决(The server time zone value 'Ö ...

  10. vue全家桶(2.5)

    3.8.动态路由匹配和路由组件传参 3.8.1.动态路由匹配 动态路由意味着不固定,具有某种模式,我们希望通过某种匹配方式,把这种不固定的路由形势映射到同一个组件,例如:一个User组件,不同的ID表 ...