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

直接上源码，原文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>