HTML和JSON的数据交互-HTML模板

浏览数：26 / 时间：2015年06月09日

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style>
 6 body {
 7 
 8     overflow-x:hidden;//是否对内容的左/右边缘进行裁剪
 9 }
10 ul {
11     padding:0;
12     margin:0;
13     list-style-type:none;
14 }
15 li {
16     margin-right:10px;
17     float:left;
18     position:relative;
19 }
20 </style>
21 </head>
22 <body>
23 <div id="main">
24   <h1>HTML和JSON的数据交互 -HTML模板</h1>
25   <h2>使用模板化的方法解决json的循环显示</h2>
26   <div ><a href="http://www.zhangxinxu.com/wordpress/?p=2649">原文章 ?</a></div>
27   <div ><a href="http://www.zhangxinxu.com/study/201209/javascript-data-template.html">原文章实例 ?</a></div>
28   <ul id="ul">
29     test
30   </ul>
31 </div>
32 <textarea id="Area" style="display:none;">
33 <li>
34     <a href="javascript:" data-id="$couponid$">
35         <img src="$JSON.url$/$imgsrc$" width="240" height="180" />
36         <p>$traffic$</p>
37         <p>$buynum$人购买</p>
38         <div>
39             <div><del class="g6 db">￥$cost$现金券</del>$discount$折</div>
40             <strong class="cr price r pr20">￥$price$</strong>
41         </div>
42         <h3>$resname$</h3>
43     </a>
44 </li>
45 </textarea>
46 <script>
47     var JSON = {
48         url: "ajax.php?author=www.zhangxinxu.com",//这行没有用
49         data: [{
50             couponid: "111",
51             imgsrc: "test1.JPG",
52             resname: "俏江南 仙乐斯广场",
53             traffic: "肇嘉浜路沿线",
54             buynum: 180,
55             cost: 100,
56             discount: 8.5,
57             price: 85
58         }, {
59             couponid: "222222",
60             imgsrc: "222222.jpg",
61             resname: "申城五月天",
62             traffic: "静安寺",
63             buynum: 0,
64             cost: 100,
65             discount: 8.0,
66             price: 80
67         }, {
68             couponid: "3",
69             imgsrc: "go-baby.jpg",
70             resname: "申城五月天",
71             traffic: "静安寺",
72             buynum: 0,
73             cost: 100,
74             discount: 8.0,
75             price: 80
76         }]
77     };
78     String.prototype.temp = function(obj) {
79         return this.replace(/\$\w+\$/gi, function(matchs) {
80             var returns = obj[matchs.replace(/\$/g, "")];        
81             return (returns + "") == "undefined"? "": returns;
82         });
83     };
84     var htmlList = ‘‘;
85     htmlTemp = document.getElementById("Area").value;
86     JSON.data.forEach(function(object) {
87         htmlList += htmlTemp.temp(object);
88     });    
89     //alert (htmlList)
90     document.getElementById("ul").innerHTML = htmlList;
91     </script>
92 </div>
93 </body>
94 </html>