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

随机推荐

Bzoj 1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名传递闭包,bitset
1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 323 Solved ...
利用Trie树对字符串集合进行排序并计算特征值
该算法用于将一组乱序的字符串反序列化到一个Trie树中,这个过程即可视为对字符串进行了一次排序. 还可以通过调用 GetFeatureString 将该 Trie 树重新序列化. #include & ...
UCloud EIP 你真的懂得如何使用么？ - SegmentFault
UCloud EIP 你真的懂得如何使用么? - SegmentFault UCloud EIP 你真的懂得如何使用么?
Django中的cookie与session
cookie与session的实现原理 HTTP被设计为”无状态”,每次请求都处于相同的空间中. 在一次请求和下一次请求之间没有任何状态保持,我们无法根据请求的任何方面(IP地址,用户代理等)来识别来 ...
最受IT公司欢迎的50款开源软件
文章来自:云头条编译本文介绍了多款知名的开源应用软件,科技公司可以用它们来管理自己的 IT 基础设施.开发产品. 过去十年间,许多科技公司已开始畅怀拥抱开源.许多公司使用开源工具来运行自己的 IT ...
动态更换view类的背景---StateListDrawable的应用
StateListDrawable可以根据View的不同状态,更换不同的背景可以应用如EditText,Button等中,以Button为例系统中默认的按钮被按下的颜色和未点击时的颜色不一样,该种 ...
如何将下载好的jar包添加到maven本地仓库
1.首先在pom.xml中添加 <dependency> <groupId>org.springframework.security</groupId> ...
深入浅出node(4) 异步编程
一)函数式编程基础二)异步编程的优势和难点 2.1 优势 2.2 难点 2.2.1 异常处理 2.2.2 函数嵌套过深 2.2.3 阻塞 2.2.4 多线程编程 2.2.5 异步转同步三)异步编程 ...
初学scala1——Option
Scala的Option[T]是容器对于给定的类型的零个或一个元件.Option[T]可完美替代Java中的null,可以是Some[T]或者None. 例如,Scala Map的get方法输出即为O ...
【Android - V】之SwipeRefreshLayout的使用
SwipeRefreshLayout是Android V4.V7包中的一个控件,是Google给我们提供的一个下拉刷新的布局控件,可以轻松完成下拉刷新. SwipeRefreshLayout的特点是其 ...

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

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

随机推荐

热门专题