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

随机推荐

排序算法简介及其C实现
排序算法(Sorting Algorithm)是计算机算法的一个组成部分. 排序的目标是将一组数据 (即一个序列) 重新排列,排列后的数据符合从大到小 (或者从小到大) 的次序.这是古老但依然富有挑战 ...
phpmyadmin万能密码
影响版本:2.11.3 / 2.11.4 利用方法:用户名处写入‘localhost’@'@”则登录成功. (注意全部是英文标点符号,最后一个为英文双引号)
封装获取网络信息Linux—API类
封装获取网络信息Linux—API类封装好的库: #ifndef NETINFORMATION_H #define NETINFORMATION_H #include <netdb.h> ...
ACM3787
/* 问题说明给定两个整数A和B,其表示形式是:从个位开始, 每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式输出. 输入输入包含多组数据数据,每组数据占一行, ...
Matlab编程-基本命令行语句
(1) mathlab命令行中“,”与“:”的区别: 结尾不加任何东西也会输出结果以“,”结尾不显示变量数值,但是再次输入变量名之后可以输出变量值以“:”结尾显示变量值 (2) 输出格式控制 ...
Milk Patterns - poj 3261 （求重复k次的最长子串）
题目大意:给你一个数组,求这个数组里面至少重复k次的子串. 分析:后缀数组的练手题目...不过给的数字比较大,可以先离散化处理一下即可. 代码如下: ===================== ...
在Mapper中进行循环判断
1.在Bo中将值保存在list中
request.setAttribute()用法
小问题: JSP1代码 String [] test=new String[2]; test[0]="1"; test[1]="2"; request.setA ...
Hibernate自定查询返回list<?>
/** * * @param session * :一个会话 * * @param hql * :是需要执行的hql语句, * * @param offset * 设置开始位置 * * @param ...
c#委托和事件(上)
C# 中的委托和事件引言委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 ...

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

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

随机推荐

热门专题