js实现内容显示并使用json传输数据

前端技术 2023/09/07 JavaScript

最近做一个项目，要求是div内为空 所有代码都写在<script>里面，<script>里面的文本用json传输，这个问题对于我来说有些困难。
还好，最后在教程和同事的帮助下写出来了，下面贴上源代码。

<!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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18416

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案