用script实现内容显示，并使用json传输数据
今天做一个项目，要求是div内为空 所有代码都写在<script>里面，<script>里面的文本用json传输。这个对我一个刚出校门，用div写了三年的页面的人来说真的好难，更何况我进公司之前根本就不知道什么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>
用script实现内容显示，并使用json传输数据的更多相关文章
- Android 自定义 ListView 显示网络上 JSON 格式歌曲列表
本文内容 环境 项目结构 演示自定义 ListView 显示网络上 JSON 歌曲列表 参考资料 本文最开始看的是一个国人翻译的文章,没有源代码可下载,根据文中提供的代码片段,自己新建的项目(比较可恶 ...
- Firebug中调试中的js脚本中中文内容显示为乱码
Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...
- 用css3让溢出内容显示省略号
css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...
- java servlet上传文件并把文件内容显示在网页中
servlet3.0(JDK1.6)自带的API即可实现本地文件的上传,Servlet3.0新增了Part接口,HttpServletRequest的getPart()方法取得Part实现对象.下面我 ...
- c# label的内容显示不全
c# label的内容显示不全.须要设置例如以下属性就可以: 1.将Lable的font属性的字体改成宋体: 2.将AutoSize属性改成true: 然后内容就能够显示所有了.
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- 用ListView实现对数据库的内容显示
用ListView实现对数据库的内容显示 创建一个触发机制 ---------(作用)将数据读入ArrayList集合中 MyBase base = new MyBase(); SQLiteDatab ...
- 使用LINQ TO XML 创建xml文档，以及读取xml文档把内容显示到GridView例子
首先,准备了一个Model类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- 以流方式读写文件：文件菜单打开一个文件，文件内容显示在RichTexBox中，执行复制、剪切、粘贴后，通过文件菜单可以保存修改后的文件。
MainWindow.xaml文件 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&q ...
随机推荐
- MVC 5 App 通过 Facebook OAuth2 登陆(Sign-on)的问题
今天做了下MVC 5 App通过Google, Twitter, Linkedin 和 Facebook进行登录的例子, 算是对Asp.net Identity的一个入门,做的过程中发现了如下的问题, ...
- [YUM]Public key for *.rpm is not installed
解决办法: 此时要导入rpm的签名信息即可 以root登录,执行下面命令 # rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-redhat-release
- Python切割nginx日志_小组_ThinkSAAS
Python切割nginx日志_小组_ThinkSAAS Python切割nginx日志
- poj 1383 Labyrinth【迷宫bfs+树的直径】
Labyrinth Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 4004 Accepted: 1504 Descrip ...
- nyoj 88 汉诺塔（一）【快速幂】
汉诺塔(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝石针.印度 ...
- Properties/Property文件读取（键值均）乱码问题！
方法一:使用native2ascii进行转码,这个不做说明,客户不可能帮你转码的. 方法二:当键是因为时直接getProperty即可,但加载后的propertis对象里的键也是中文乱码,就无法通过g ...
- BZOJ 3262 陌上花开 CDQ分治
= =原来复杂度还是nlog^2(n) Orz 被喷了 #include<cstdio> #include<cstdlib> #include<algorithm> ...
- Java Web中资源的访问路径
在web应用中,以“/”开头的是绝对路径,不以“/”开头的是相对路径. 在服务器端,通常都使用绝对路径.例如web.xml.struts.xml.servlet等的访问路径都是以“/”开始. 服务 ...
- sencha touch 框架的几种核心脚本文件之间的区别
sencha-touch-debug.js 供开发时用sencha-touch.js 供发布时用sencha-touch-all.js All 供不能使用SDK构建应用程序时,将 ...
- javascript 匿名函数的理解，js括号中括function 如(function(){})
代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也 ...