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