今天做一个项目，要求是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传输数据的更多相关文章

  1. Android 自定义 ListView 显示网络上 JSON 格式歌曲列表

    本文内容 环境 项目结构 演示自定义 ListView 显示网络上 JSON 歌曲列表 参考资料 本文最开始看的是一个国人翻译的文章,没有源代码可下载,根据文中提供的代码片段,自己新建的项目(比较可恶 ...

  2. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...

  3. 用css3让溢出内容显示省略号

    css3现在越来越普及了.给我们前端人员也带来了极大的便利.以前要实现让溢出的内容显示省略号还得通过js实现,现在完全可以用css代替之. 主要的代码如下: <style type=" ...

  4. java servlet上传文件并把文件内容显示在网页中

    servlet3.0(JDK1.6)自带的API即可实现本地文件的上传,Servlet3.0新增了Part接口,HttpServletRequest的getPart()方法取得Part实现对象.下面我 ...

  5. c# label的内容显示不全

    c# label的内容显示不全.须要设置例如以下属性就可以: 1.将Lable的font属性的字体改成宋体: 2.将AutoSize属性改成true: 然后内容就能够显示所有了.

  6. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  7. 用ListView实现对数据库的内容显示

    用ListView实现对数据库的内容显示 创建一个触发机制 ---------(作用)将数据读入ArrayList集合中 MyBase base = new MyBase(); SQLiteDatab ...

  8. 使用LINQ TO XML 创建xml文档，以及读取xml文档把内容显示到GridView例子

    首先,准备了一个Model类 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  9. 以流方式读写文件：文件菜单打开一个文件，文件内容显示在RichTexBox中，执行复制、剪切、粘贴后，通过文件菜单可以保存修改后的文件。

    MainWindow.xaml文件 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&q ...

随机推荐

  1. Unity Diffuse Metal Shader Mod

    Shader "MetalShader" { Properties { _MainTex ("Base (RGB) RefStrGloss (A)", 2D) ...

  2. duang体加班版

    领导第一次让我加班的时候,其实我是拒绝的,因为我觉着加班这个事,不能你让我加我就加,晚了就没有地铁了..领导跟我说可以打车报销.加了一个月之后,我的钱包duang~,后来我知道报销其实是假的,我每天打 ...

  3. C++之函数指针

    函数指针常用的有三类 1.指向普通函数的函数指针 2.指向类中静态成员函数的函数指针 3.指向类的成员函数的函数指针 一.指向普通函数的函数指针 #include <iostream> u ...

  4. 网站优化与Cdn文件传输服务

    网站优化与Cdn文件传输服务 如今互联网无处不在,其方便快捷.性质和低成本的经济特点,已经逐渐成为商务贸易.信息分发和数据交付的一个重要渠道.要想让数据的分发带来巨大的效益,那么网民的满意是唯一的办法 ...

  5. rnqoj-73-展演队型-dp

    纯属于敢想就敢做的题目,列出来状态转移就OK了 #include<stdio.h> #include<string.h> #include<iostream> #i ...

  6. 还原dede数据后系统基本参数空白栏目无显示的解决方法

    有时dedecms开发的网站在更换空间还原数据后,出现"系统基本参数"空白,而且可以看到tag也没有了. 大家不妨看看后台"数据库备份/还原"处,已经还原后的表 ...

  7. Selenium+Java+TestNG环境配置

    1. JDK 2.eclipse+TestNG >TestNG安装.   Name:testng  Location:http://beust.com/eclipse.如图: 3.seleniu ...

  8. header的用法小结(转)

    php header()函数的具体作用是向客户端发送一个原始 HTTP 标头[Http Header]到客户端. 标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的 ...

  9. android 10 事件

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo ...

  10. android 06 LinearLayout

    xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...