ajax配合art-template模板引擎的使用
最近才接触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模板引擎的使用的更多相关文章
- Django基础,Day10 - template 模板引擎与路径设置
作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- 如何选择Javascript模板引擎(javascript template engine)?
译者 jjfat 日期:2012-9-17 来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- 第115天:Ajax 中artTemplate模板引擎(一)
一.不分离与分离的比较 1.前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用.后 ...
- Ajax概述,封装以及联合模板引擎进行数据交互
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...
随机推荐
- AutoIt实现文件上传
AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...
- matplotlib添加子图(拼图功能)
我们已经知道,matplotlib是python中的一个十分好用的作图库,它的简单的使用方法可以在之前的随笔中找到.传送门:https://www.cnblogs.com/chester-cs/p/1 ...
- IP地址、计算机名称、MAC地址如何获取
以下的操作都在“命令提示窗口”中操作. 已知IP,如何获得计算机名称 方法(1): 使用ping -i ip地址 例如已知地址为192.168.1.168. 那么使用ping -i 192.168.1 ...
- idea安装docker插件
Preferences->Plugins 根据上图安装docker插件,安装完成后可使用idea来管理docker项目了.docker运行项目请参加"Docker开发环境搭建" ...
- skywalking学习ppt
和传统应用监控的区别,Dapper论文 监控图
- java 中的自动装箱和拆箱操作
在前面的文章中提到,Java为每种基本数据类型都提供了对应的包装器类型,至于为什么会为每种基本数据类型提供包装器类型在此不进行阐述,有兴趣的朋友可以查阅相关资料.在Java SE5之前,如果要生成一个 ...
- 网络虚拟化之linux虚拟网络基础
1 linux虚拟网络基础 1.1 Device 在linux里面devic(设备)与传统网络概念里的物理设备(如交换机.路由器)不同,Linux所说的设备,其背后指的是一个类似于数据结构.内核模块或 ...
- 黑鸟码表BB10S骑行记录导入行者
前言 开始骑车用行者app记录, 后来觉得每次都要开app很麻烦, 于是在骑友的推荐下入手了黑鸟BB10S, 使用了一段时间感觉还不错, 不过也遇到之前大家说的问题, 黑鸟不支持直接导出fit文件, ...
- 你知道Redis可以实现延迟队列吗?
最近,又重新学习了下Redis,深深被Redis的魅力所折服,我才知道Redis不仅能快还能慢(我想也这么优秀o(╥﹏╥)o),简直是个利器呀. 咳咳咳,大家不要误会,本文很正经的啦! 好了,接下来回 ...
- 1年转行资深前端工程师,开源项目过 1k stars,完整学习过程
先介绍下大致情况时间线. 18 年 8 月正式转方向为前端,之前做了一段时间的 iOS,后来因为对前端更感兴趣所以就打算转方向了.19 年 10 月入职当前公司,定级资深前端,分配到业务架构小组,自此 ...