<!--引入脚本--><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>

1:  <ul id="eachList">

2:  <!--这里是将要显示到的DIV层-->

3:  </ul>

4:  

$(function () {$.ajax({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");};});

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

<script src="js/mytemplates.js" type="text/javascript"></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>';

<!—模板  直接用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="data:images/ico_01.png" title="这里是默认头像"/>   {{/if}}   学生是否选中:${$value.Check}</label></li>{{/each}}</ul>

                   </td>

</tr>        </script>

//这里一定要加上，是在文档载入完成之后，才执行绑定模板的$(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");     }); 

<table id="showMyJson" border="1"><tr><td>&nbsp;班级Id</td><td>&nbsp;班级名称</td><td>&nbsp;班级学生</td></tr></table>