<!--引入脚本-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.js" type="text/javascript"></script>
<!--开始写模板-->
<script id="each" type="text/x-jquery-tmpl">
<li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li>
</script>
<script type="text/javascript">
$(function () {
//这里是数据
var userLangs = [
ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English']
ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']
//模板 绑定 数据 添加到 指定的div或者是容器里面
$('#each').tmpl(userLangs).appendTo('#eachList');
</script>
然后我们在html页面里面，给一个容器，用于显示数据绑定之后添加到什么容器上，可以是div也可以是其他的，例如这里是ul
type: "
post
",
url: "
handler/xxHandler.ashx
",
data: { classid: "
12000001989
", type: "
getclassinfo
" },
dataType: "
json
",
success: populate
//如果ajax成功，则执行这个操作
function populate(data) {
// 把模板标记，编译成[模板缓存]，起个名字叫 eachTemplate,方便我们以后在其他地方调用
$.template("
eachTemplate
", each);
//把缓存 加入 数据，然后添加到容器里面
$.tmpl("
eachTemplate
", data).appendTo("
#eachList
");
// 同一个数据，也能第二次利用
$.template("
hwTemplate
", HomeWorkSendTemplate);
//把缓存 加入 数据，然后添加到容器里面
$.tmpl("
hwTemplate
", data).appendTo("
#hwList
");
后台 handler 获取参数，并且返回 序列化的 json 给前台脚本
模板方式一：使用script脚本包围的方式，注意，
一定要加上一个
type="text/x-jquery-tmpl"
<script id="each" type="text/x-jquery-tmpl">
//模板1 直接用script脚本包围的变量 注意后面一定要加type为 tmpl的特定值
<li>班级Id: ${ClassId}; 班级名称: ${ClassName};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li>
</script>
/* 模板二 直接在 其他的例如 mytemplate.js 里面写变量 即可 注意，要在自己的页面里面进行脚本引入 */
var HomeWorkSendTemplate = '<div id="hwsendmain_${ClassId}" class="content_body">';
HomeWorkSendTemplate += '<!--布置作业开始--><div id="tag15">';
HomeWorkSendTemplate += ' <div class="content">';
HomeWorkSendTemplate += ' <div class="top">布置作业</div>';
三：使用复杂的json格式展示数据
(1):准备好模板，这里我们是使用一个表格来展示，所以模板是用的tr来显示每一行的数据
<!—模板 直接用script脚本包围的变量 注意后面一定要加type为 tmpl的特定值-->
<script id="classMuban" type="text/x-jquery-tmpl">
<tr><td>${Cid}</td>
<td>${Cname}</td><td><ul>{{each Students}}
<li>序号${$index + 1}: <label>学生id:${$value.Sid}学生名称:${$value.Sname}
学生头像:{{if $value.Sphoto}}
<img src="${$value.Sphoto}" />
{{else}}
<img src="images/ico_01.png" title="这里是默认头像"/>
{{/if}}
学生是否选中:${$value.Check}</label></li>{{/each}}</ul>
</script>
(2):准备数据，以及当文档加载完毕之后，执行绑定
//这里一定要加上，是在文档载入完成之后，才执行绑定模板的
$(function () {
var demodata = [{
"Cid": "1",
"Cname": "三年二班",
"Check": "0 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选",
"Cphoto": "班级图片地址",
"Students": [
"Sid": "s1",
"Sname": "周杰伦",
"Sphoto": "", //这里可能没有图片，那么我们显示的时候，还要判断是否显示默认图片
"Check": "0表示没有勾选 1表示已经勾选"
"Sid": "s2",
"Sname": "李宇春",
"Sphoto": "http://pic.cnitblog.com/face/582230/20131114141342.png",
"Check": "0表示没有勾选 1表示已经勾选"
"Cid": "1",
"Cname": "三年四",
"Check": "0 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选",
"Cphoto": "班级图片地址",
"Students": [
"Sid": "s3",
"Sname": "周笔畅",
"Sphoto": "http://pic.cnitblog.com/face/572602/20131112163110.png",
"Check": "0表示没有勾选 1表示已经勾选"
"Sid": "s4",
"Sname": "董瑞",
"Sphoto": "http://pic.cnitblog.com/face/u119077.jpg",
"Check": "0表示没有勾选 1表示已经勾选"
//编译模板classMuban为一个变量名-> nameClassMuban 这样以后在其他地方，就可以方便调用 nameClassMuban了
$.template("nameClassMuban", window.classMuban);
//把模板缓存 加入 数据，然后添加到容器里面
$.tmpl("nameClassMuban", demodata).appendTo("#showMyJson");
(3):容器，这里为了显示方便，我们就用一个表格，并且第一行，我们自己已经给了。如果是实际项目中，一般都是DIV做容器
<table id="showMyJson" border="1">
<td> 班级Id</td>
<td> 班级名称</td>
<td> 班级学生</td>
</table>
