直接上源码，原文http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style>

 body {

     overflow-x:hidden;//是否对内容的左/右边缘进行裁剪

 }

 ul {

     padding:0;

     margin:0;

     list-style-type:none;

 }

 li {

     margin-right:10px;

     float:left;

     position:relative;

 }

 </style>

 </head>

 <body>

 <div id="main">

   <h1>HTML和JSON的数据交互 -HTML模板</h1>

   <h2>使用模板化的方法解决json的循环显示</h2>

   <div ><a href="http://www.zhangxinxu.com/wordpress/?p=2649">原文章 »</a></div>

   <div ><a href="http://www.zhangxinxu.com/study/201209/javascript-data-template.html">原文章实例 »</a></div>

   <ul id="ul">

     test

   </ul>

 </div>

 <textarea id="Area" style="display:none;">

 <li>

     <a href="javascript:" data-id="$couponid$">

         <img src="$JSON.url$/$imgsrc$" width="240" height="180" />

         <p>$traffic$</p>

         <p>$buynum$人购买</p>

         <div>

             <div><del class="g6 db">¥$cost$现金券</del>$discount$折</div>

             <strong class="cr price r pr20">¥$price$</strong>

         </div>

         <h3>$resname$</h3>

     </a>

 </li>

 </textarea>

 <script>

     var JSON = {

         url: "ajax.php?author=www.zhangxinxu.com",//这行没有用

         data: [{

             couponid: "111",

             imgsrc: "test1.JPG",

             resname: "俏江南 仙乐斯广场",

             traffic: "肇嘉浜路沿线",

             buynum: 180,

             cost: 100,

             discount: 8.5,

             price: 85

         }, {

             couponid: "222222",

             imgsrc: "222222.jpg",

             resname: "申城五月天",

             traffic: "静安寺",

             buynum: 0,

             cost: 100,

             discount: 8.0,

             price: 80

         }, {

             couponid: "3",

             imgsrc: "go-baby.jpg",

             resname: "申城五月天",

             traffic: "静安寺",

             buynum: 0,

             cost: 100,

             discount: 8.0,

             price: 80

         }]

     };

     String.prototype.temp = function(obj) {

         return this.replace(/\$\w+\$/gi, function(matchs) {

             var returns = obj[matchs.replace(/\$/g, "")];

             return (returns + "") == "undefined"? "": returns;

         });

     };

     var htmlList = '';

     htmlTemp = document.getElementById("Area").value;

     JSON.data.forEach(function(object) {

         htmlList += htmlTemp.temp(object);

     });

     //alert (htmlList)

     document.getElementById("ul").innerHTML = htmlList;

     </script>

 </div>

 </body>

 </html>

HTML和JSON的数据交互-HTML模板的更多相关文章

  1. HTML和JSON的数据交互-jsonp跨域

    HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...

  2. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  3. springmvc+json 前后台数据交互

    1. 配置(1) 文件配置参考这里(2) 导入jackson相关包:jackson-annotations-2.9.4.jar,jackson-core-2.9.4.jar,jackson-datab ...

  4. Android PHP 通过JSON进行数据交互

    一.首先是Android客户端解析PHP返回的JSON数据 1.PHP代码(这里用到了数据库,如果没有准备数据库的话,可以自定义字符串) <?php $link=mysql_connect(SA ...

  5. struts2和JSON的数据交互

    一.实验环境 1.struts2基本包 2.json-plugin 在struts2的lib下可以找到. 3.web.xml 加入struts2 <filter> <filter-n ...

  6. SpringMVC 数据交互

    为什么使用JSON进行数据交互? JSON数据格式比较简单.解析比较方便,在接口调用及HTML页面Ajax调用时较常用. JSON交互方式 请求是Key/Value,响应是JSON(推荐使用) 请求是 ...

  7. JavaScript模板引擎实现数据交互

    经过1年的磨练,近期终于稍微明白到,前端是怎么做到企业要求的:数据交互. 1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事? 2,可以通过JS框架和JS模板来实现 ...

  8. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  9. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

随机推荐

  1. 2016 - 1 -17 GCD主队列与全局队列

    一:主队列 1.概念:每一个应用程序对应唯一一个主队列,直接GET即可:在多线程开发中,使用主队列更新UI dispatch_queue_t q = dispatch_get_main_queue() ...

  2. python3 nonlocal vs global

    考虑这样一个python程序: x = 12 def func(): x = 1 func() print(x) 输出为:x = 12 因为函数内部定义的x被认为只属于局部作用域,为了表明我么引用的是 ...

  3. Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  4. iOS 开发之推力动画效果

    步骤: 1.使用single view application 创建新的项目 2.在.h文件中需要遵守两个协议<UICollisionBehaviorDelegate,UIGestureReco ...

  5. 用Qt图形视图框架开发拼图游戏

    用Qt的图形视图框架(Graphics View Framework)做了一个拼图游戏DEMO,演示了: QGraphicsView.QGraphicsScene.QGraphicsItem的基本用法 ...

  6. 转：Bat命令学习

    转:http://www.cnblogs.com/SunShineYPH/archive/2011/12/13/2285570.html一.基础语法: 1.批处理文件是一个“.bat”结尾的文本文件, ...

  7. LeetCode Implement Queue using Stacks （数据结构）

    题意: 用栈来实现队列. 思路: 一个栈是不够的,至少要两个. (1)插入.永远只插入到stack1中(插到栈顶). (2)弹出.如果stack2不为空,直接弹出stack2的栈顶,否则,将stack ...

  8. cmake在实际复杂项目中的使用

    在实际复杂的项目之中,会有很多的源文件,以及对于库的依赖,如果直接使用makefile会比较的繁琐,而且makefile的推导规则也非常多,对多目录的支持也比较复杂. 最近看了一下cmake,发现配置 ...

  9. Nexus仓库构建

    1 . 私服简介 私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则,私服请求外部 ...

  10. 决策树模型 ID3/C4.5/CART算法比较

    决策树模型在监督学习中非常常见,可用于分类(二分类.多分类)和回归.虽然将多棵弱决策树的Bagging.Random Forest.Boosting等tree ensembel 模型更为常见,但是“完 ...