前两天写前端遇到很多table 和 表单需要拼接的问题 ， 一堆的字符串 ， 页面显得冗长，又不好维护。于是有了下文。

话不多说，上代码：

首先引用一个js文件：

<script src="~/Content/js/tmpl.min.js"></script>

　　前台：

 　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　<body>
　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　<p id="result">

                                <script type="text/x-tmpl" id="tmp">

　　　　　　　　　　　　　　　　　　　　　//“o”官方给的解释是对模板函数的数据参数的引用

                                    <span>{%=o.name%}</span>

                                    <span>{%=o.sex%}</span>

                                    <table class="table table-">

                                    {% for(var i=0;i<o.list.length;i++){ %}

                                    <tr><td>a</td><td>{%=o.list[i].a%}</td></tr>

                                    <tr><td>b</td><td>{%=o.list[i].b%}</td></tr>

                                    {% } %}

                                    </table>

                                </script>

                            </p>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　</body>

     <script>

    $(document).ready(function () {

        GetData();

    });

    function GetData() {

        $.ajax({

            type: "get",

            url: "/default1/data",

            dataType: "json",

            success: function (obj) {

                //obj是字符串，转成json对象需要加"("+obj+")"

                var o = eval("("+obj+")");

                document.getElementById("result").innerHTML = tmpl('tmp', o);

            }

        });

    }

</script>

　　数据从这里来：

 public JsonResult Data()

        {

            var json = "{'name':'小明','sex':'男','list':[{'a':'1','b':'2'},{'a':'3','b':'4'}]}";

            return Json(json, JsonRequestBehavior.AllowGet);

        }

　　附带tmpl.js:https://files.cnblogs.com/files/tony-brook/JavaScript-Templates-3.6.0.rar

javascript Template tmpl的更多相关文章

  1. 如何选择Javascript模板引擎（javascript template engine)？

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

  2. jquery.tmpl.js使用外部 jQuery Template文件

    $.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever ...

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

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

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

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

  5. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  6. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  7. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

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

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

  9. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

随机推荐

  1. Android学习：简易图片浏览

    这个例子学习混合使用XML布局和代码来控制UI,习惯上把变化小.行为固定的组件放在XML布局文件中管理,而那些变化较多.行为控制复杂的组件则交给Java代码来管理. 先在布局文件中定义一个线性布局容器 ...

  2. Python __all__变量用法

    Python中一个py文件就是一个模块,“__all__”变量是一个特殊的变量,可以在py文件中,也可以在包的__init__.py中出现. 1.在普通模块中使用时,表示一个模块中允许哪些属性可以被导 ...

  3. HBuilder控制台集成命令提示符(终端/CMD)功能

    参考:https://jingyan.baidu.com/album/6b97984dc9cda31ca2b0bf00.html?picindex=3

  4. hibernate12--缓存

    <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN&q ...

  5. python中 requests 支持 socks代理

    参考博客 https://zhengheng.me/2016/08/25/python-requests-socks5/

  6. 协程greenlet、gevent

    greenlet为了更好使用协程来完成多任务,python中greenlet模块对其封装,从而使得切换任务变得更加简单安装方式 pip3 install greenlet 示例代码: from gre ...

  7. juqery 下拉加载数据

    html  代码  一开始是需要显示的第一页 <div class="hot-product f15 fixed-Width clearfix" id="goods ...

  8. NFC中国-中国第一NFC论坛,NFC中文论坛+NFC技术社区+NFC_电子发烧友网【申明：来源于网络】

    NFC中国-中国第一NFC论坛,NFC中文论坛+NFC技术社区[申明:来源于网络] NFC中国-中国第一NFC论坛,NFC中文论坛:http://nfcchina.org/forum.php NFC技 ...

  9. MOT南京站 | 卓越研发之路：锻造顶级后端系统

    代码是互联网企业信息化核心,也是众多研发团队智慧的结晶,如何将代码发挥到最大价值?如何用代码快.准.好的实现需求?相信这是很多IT从业者所困扰的问题. MOT南京站首期以『锻造顶级后端系统』为主题,我 ...

  10. Swagger学习笔记

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! Swagger学习笔记 课程目标 了解Swagger的概念及作用 掌握在项目中集成Swagger ...