前两天写前端遇到很多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. SQL查询无限层级结构的所有下级，所有上级

    无限层级结构的table1表,Id(主键),ParentId(父级id)查询某个Id的所有下级或所有上级,使用WITH AS,UNION ALL 查询 1.查询Id为1所有的下级 WITH T AS( ...

  2. zeppelin 一直报这个警告 也是醉了

    用./zeppelin-daemon.sh start 启动zeppelin 一直报这个警告.. WARN [2017-03-23 19:11:34,461] ({qtp483422889-45} N ...

  3. 以太坊: ETH 发送交易 sendRawTransaction 方法数据的签名 和 验证过程

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. GO语言-基础语法：条件判断

    1. IF判断(aa.txt内容:asdfgh.bb.txt内容:12345) package main import ( "io/ioutil" "fmt" ...

  5. Skip the Class

    BestCoder Round #92 Skip the Class  Accepts: 678  Submissions: 1285  Time Limit: 2000/1000 MS (Java/ ...

  6. Numpy学习

    决定陆陆续续写一些Numpy的例子.. 1. 如果想表示e的x次,就可以这样用,下面直接写一个sigmod函数: def sigmoid(z): return 1 / (1 + np.exp(-z)) ...

  7. ThinkPHP缓存技术(S(),F(),查询缓存,静态缓存)

    直接查看原网址 https://blog.csdn.net/u010081689/article/details/47976271

  8. C语言定义的操作mysql数据库的接口

    编写的环境:centos7系统下,对mysql的衍生mariadb进行数据库的操作,包含设置访问数据库的参数,查询数据库和增删改数据库的三个功能.对于查询数据库,我这里允许不返回查询结果,用于判断查询 ...

  9. js中级小知识4

    1.针对表单 form   input     select      textarea type="radio/checkbox/passdord/button/submit/reset/ ...

  10. Mybatis连接配置文件详解

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...