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

今天做一个项目，要求是div内为空所有代码都写在<script>里面，<script>里面的文本用json传输。这个对我一个刚出校门，用div写了三年的页面的人来说真的好难，更何况我进公司之前根本就不知道什么json，我很庆幸我在这个公司里面有同事带带我，教教我，有不会的也能问问他们。真的是感觉这三年都白学了，学的知识完全不能跟社会接轨。。。

还好，最后在教程和同事的帮助下写出来了，下面贴上源代码。

<!DOCTYPE html>
<html>

//关键点在这里引用dot.js这个库。这个库需要自己下载

</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中
{

var json = {
"test": "包邮正品玛姬儿压缩面膜无纺布纸膜100粒送泡瓶面膜刷喷瓶新款",
"test1":"包邮还是快递费还是快乐放假了；爱上法兰克福骄傲了卡夫卡拉升"
};
// var obj = eval(json); 
document.getElementById("test").innerHTML = json.test;
document.getElementById("test1").innerHTML=json.test1;

}

};</script>

<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>

</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 ...

随机推荐

unity3d 制造自己的水体water effect（二）
前篇:unity3d 制造自己的水体water effect(一) 曲面细分:Unity3d 使用DX11的曲面细分 PBR: 讲求基本算法 Unity3d 基于物理渲染Physically-Base ...
UVA 11427 Expect the Expected（DP+概率）
链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=35396 [思路] DP+概率见白书. [代码] #include&l ...
京东集团副总裁李大学：像CEO一样思考 - Dancen的专栏 - 博客频道 - CSDN.NET
京东集团副总裁李大学:像CEO一样思考 - Dancen的专栏 - 博客频道 - CSDN.NET 京东集团副总裁李大学:像CEO一样思考
content
http://www.cnblogs.com/lrysjtu/p/4474900.html lexus - 博客园 http://www.cnblogs.com/rio2607/p/4472456.h ...
record
http://www.cnblogs.com/90zeng/p/python_translation.html http://www.cnblogs.com/netfocus/p/4478094.ht ...
hdoj 1285 确定比赛名次【拓扑排序】
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
Android 官方文档：（二）应用清单 —— 2.2 <action>标签
syntax: <action android:name="string" /> contained in: <intent-filter> descrip ...
Java堆栈详解 .
1. Java中堆栈(stack)和堆(heap) (1)内存分配的策略按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据 ...
Java序列化之Serializable
Java的序列化流程如下: Java的反序列化流程如下: 注意:并不是所有类都需要进行序列化,主要原因有两个 1)安全问题.Java中有的类属于敏感类,此类的对象数据不便对外公开,而序列化的对象数据很 ...
python s12 day3
python s12 day3 深浅拷贝对于数字和字符串而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

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

用script实现内容显示，并使用json传输数据的更多相关文章

随机推荐

热门专题