直接上源码,原文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. comet

    comet 1.简介: 基于 HTTP长连接的“服务器推”技术,是一种新的 Web 应用架构,基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程序推送数据,而不需要客户端显式的发出请求.C ...

  2. Linux Mint下编译Bochs

    我在Linux Mint命令行下输入sudo apt-get install bochs安装之后发现这个没有安装gui界面,使用也存在一些问题,所以直接删掉从官网下载代码自己编译安装. 给Linux ...

  3. 渐进记法(O,Ω,Θ)

    第一次在<算法导论>中看到这三种渐进记法的符号,当时对此一窍不通,所以也就没有注意它们,直接把他们忽略了,知道学习算法的时候,才知道当初的做法有多傻,因为一个算法的好坏以及复杂度,可以用它 ...

  4. IOS源码封装成.bundle和.a文件,以及加入xib的具体方法,翻遍网络,仅此一家完美翻译!! IOS7!!(3) 完美结局

    以上翻译有误解之处,现在简单做法如下: 经过深入研究,才感觉明白了内部机制,现在简单介绍于下,主要步骤:xcode5 创建库项目,删掉测试文件和默认创建的类,添加viewController类带xib ...

  5. 根据存放位置数据的链表P打印链表L的元素

    题目:给定一个链表L和另一个链表P,它们包含以升序排列的整数.操作printLots打印L中那些由P所指定的位置上的元素.写出过程printLots(L,P).只可以使用公有的STL容器操作.该过程的 ...

  6. 11、C#基础整理(特殊集合和哈希表)

    特殊集合:队列.栈 一.栈Stack类:先进后出,没有索引 Stack ss = new Stack(); 1.增加数据:push :将元素推入集合 ss.Push(); ss.Push(); ss. ...

  7. Response响应请求操作

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...

  8. cron用法

    cron用法说明 cron的用法老是记不住,索性写下来备忘.下文内容大部分是根据<Cron Help Guide>翻译而来,有些部分是自己加上的. 全文如下: cron来源于希腊单词chr ...

  9. HDU 1003 Max Sum(AC代码)

    #include <stdio.h> int main(){ int i,t,j,n,x; int start,end,temp,max,sum; scanf("%d" ...

  10. HDU 1001 Sum Problem(AC代码)

    #include <stdio.h> int main(){ int k,sum; while(scanf("%d",&k)!=EOF){ ==){ sum=( ...