js实现内容显示并使用json传输数据
内容摘要
最近做一个项目,要求是div内为空 所有代码都写在<script>里面,<script>里面的文本用json传输,这个问题对于我来说有些困难。
还好,最后在教程和同事的帮助下写出来了,下面贴上源
还好,最后在教程和同事的帮助下写出来了,下面贴上源
文章正文
最近做一个项目,要求是div内为空 所有代码都写在<script>里面,<script>里面的文本用json传输,这个问题对于我来说有些困难。
还好,最后在教程和同事的帮助下写出来了,下面贴上源代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title>测试项目</title> <script src= "js\newdoT.js" ></script> //关键点在这里 引用dot.js这个库。这个库需要自己下载 <style> #center{text-align: center;} #test{text-align: left;} </style> </head> <body> <div class = "mytest" id= "mytest" > </div> <script type= "text/javascript" > window.onload = function () { var temp = doT.template($( "#mytemp" ).html()); //定义一个temp使id为mytemp的标签可以读取dot.JS内的内容 var mes = doT.template($( "#mydot" ).html()); //定义一个mes使id为mydot的标签可以读取dot.JS内的内容 $( "#mytest" ).append(mes); //将获取的值追加到mytest这个div中 $( "#mytest" ).append(temp); //将获取的值追加到mytest这个div中 { <!--定义一个json--> var json = { "test" : "包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款" ,<!--找到id为test的标签,使文档内容=test--> "test1" : "包邮 还是快递费还是快乐放假了;爱上法兰克福骄傲了卡夫卡拉升" }; // var obj = eval(json); <!--使用函数eval将定义的json转化为js对象--> document.getElementById( "test" ).innerHTML = json.test;<!--输出值--> document.getElementById( "test1" ).innerHTML=json.test1; } };</script> <script id= "mydot" type= "text/template" > <table class = "sui-table table-bordered" > <thead> <tr> <th id= "center" > </th> <th id= "center" >新客户uv</th> <th id= "center" >新客户转化率(%)</th> <th id= "center" >老客户uv</th> <th id= "center" >老客户转化率(%)</th> </tr> </thead> <tbody> <tr> <td id= "center" >昨日</td> <td id= "center" >1.0</td> <td id= "center" >15</td> <td id= "center" >11</td> <td id= "center" >1.3</td> </tr> <tr> <td id= "center" >前日</td> <td id= "center" >1.1</td> <td id= "center" >32</td> <td id= "center" >32</td> <td id= "center" >24</td> </tr> <tr> <td id= "center" >两天前</td> <td id= "center" >2.0</td> <td id= "center" >24</td> <td id= "center" >12.00</td> <td id= "center" >1.25</td> </tr> <tr> <td id= "center" >行业平均</td> <td id= "center" >1.30</td> <td id= "center" >21</td> <td id= "center" >1.07</td> <td id= "center" >1.40</td> </tr> <tr> <td id= "center" >当前现状</td> <td id= "center" ><span class = "sui-label label-warning" >低于平均</span</td> <td id= "center" ><span class = "sui-label label-info" >高于平均</span></td> <td id= "center" ><span class = "sui-label label-success" >持平</span></td> <td id= "center" ><span class = "sui-label label-warning" >低于平均</span></td> </tr> </tbody> </table> </script> <script id= "mytemp" type= "text/template" > <table class = "sui-table table-bordered" > <thead> <tr> <th colspan= "5" > <label class = "checkbox pull-left" > <input type= "checkbox" >订单编号:7867473872181848 </label><span class = "pull-right" >成交时间:2014-01-11 11:59</span> </th> </tr> </thead> <tbody> <tr> <td width= "50%" > <div class = "typographic" > <img src= "http://img04.taobaocdn.com/bao/uploaded/i4/13558026493775867/T1Cs8lFipeXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" > <a href= "#" class = "block-text" ><span id= "test" ><span></a> <span>1</span> <ul class = "unstyled" > <li>申请售后</li> <li>投诉卖家</li> </ul> </div> </td> <td rowspan= "2" width= "11%" class = "center" >56.50</td> <td rowspan= "2" width= "13%" class = "center" > <ul class = "unstyled" > <li>交易成功</li> <li><a href= "#" >订单详情</a></li> <li><a href= "#" >对方已评</a></li> </ul> </td> <td rowspan= "2" width= "13%" class = "center" ><a href= "#" class = "btn" >评价 </a></td> <td rowspan= "2" width= "13%" class = "center" > <ul class = "unstyled" > <li><a href= "#" >删除</a></li> <li><a href= "#" >标记</a></li> <li><a href= "#" >分享</a></li> </ul> </td> </tr> <tr> <td width= "50%" > <div class = "typographic" > <img src= "http://img03.taobaocdn.com/bao/uploaded/i3/T1hxekXw8dXXXXXXXX_!!0-item_pic.jpg_80x80.jpg" > <a id= "test1" href= "#" class = "block-text" ></a> <span>1</span> <ul class = "unstyled" > <li>申请售后</li> <li>投诉卖家</li> </ul> </div> </td> </tr> </tbody> </table> </script> </body> </html> |
希望本文所述对大家学习javascript程序设计有所帮助。
代码注释