前两天写前端遇到很多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. WKWebView实现网页静态资源优先从本地加载

    前言:最近微信的小游戏跳一跳特别的火,顺便也让h5小游戏更加的火热.另外微信小程序,以及支付宝的小程序都是用H5写的.无论是小游戏还是小程序,这些都需要加载更多的资源文件,处理更多的业务.这些都对网页 ...

  2. 下载Crypto，CyCrypto，PyCryptodome 报错问题

    python下载Crypto,CyCrypto,PyCryptodome,如有site-packages中存在crypto.pycrypto,在pip之前,需要pip3 uninstall crypt ...

  3. css 获取从第n个开始，之后的所有元素

    <div id="box"> <div></div> <div>等待获取</div> <div>等待获取&l ...

  4. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  5. hive 元数据库表描述

    元数据库表描述 这一节描述hive元数据库中比较重要的一些表的作用,随着后续对hive的使用逐渐补充更多的内容. mysql元数据库hive中的表: 表名 作用 BUCKETING_COLS 存储bu ...

  6. getItemAt

    getItemAt(0) 获得第一行数据 getItemAt(1) 获得第二行数据

  7. ffmpeg快速获取视频截图

    使用ffmpeg可以非常方便的生成视频截图,命令行下的mplayer也可以做视频截图,只不过mplayer在本质上还是调用ffmpeg来实现.ffmpeg 通过指定 -vcodec 参数为 mjpeg ...

  8. 《JAVA编程思想》第四版 PDF

    感谢,参考:https://www.cnblogs.com/buwuliao/p/8073211.html 一.链接: 中文版: https://pan.baidu.com/s/1d07Kp4 密码: ...

  9. Linux命令 diff cmp patch

    diff: 以行为单位进行比对 $ cat passwd | sed -e '4d' -e '6c no six line' > passwd.new $ cat -n passwd.new 1 ...

  10. POJ 3078 - Shuffle'm Up - [模拟题]

    题目链接:http://poj.org/problem?id=3087 Description A common pastime for poker players at a poker table ...