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


Posted in Javascript onMarch 16, 2016

最近做一个项目,要求是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程序设计有所帮助。

Javascript 相关文章推荐
javascript获取url上某个参数的方法
Nov 08 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
javascript中arguments,callee,caller详解
Mar 16 #Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
Javascript的表单验证长度
Mar 16 #Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
一段实用的php验证码函数
2016/05/19 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
python opencv之分水岭算法示例
2018/02/24 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
pandas的resample重采样的使用
2020/04/24 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
美国存储和组织商店:The Container Store
2017/08/16 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
乡镇务虚会发言材料
2014/10/20 职场文书
华清池导游词
2015/02/02 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python