1、要想使用jquery先要导入jar包 <script src="JS/jquery-1.2.6.js"></script> <script src="JS/jquery.jtemplates.js"></script>
2、使用jTemplates 是有相应的模板 如下:
前台!!!!!!!!!!!!!!
<script language="javascript" type="text/javascript">
//主界面 明星mv模块
function GetYSMVHomeList() {
$.ajax({
type: "get",
dataType: "json",
url: SetUrlRefresh("service/GetYSMVHomeList.jsp"),
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert("数据获取失败");
},
success: function(d) {
switch (d.result) {
case '0':
alert(d.returnval);
break;
case '1':
$("#Home_MXMVList").setTemplateElement("tplMMSList", null, { filter_data: false });
$("#Home_MXMVList").processTemplate(d);
break;
default:
alert(d.result);
break;
}
}
});
}
function SetUrlRefresh(url) {
if (url.indexOf("?") > 0)
return url + "&ououtmpt=" + (new Date().getTime());
else
return url + "?ououtmpt=" + (new Date().getTime());
}
//通过 jquery 加载
$(document).ready(function() {
GetYSMVHomeList();
});
<script/>
然后再div中一定有一个 div 通过id 与之对应
<!-- 明星MV列表 -->
<div class="main_ssf_list" id="Home_MXMVList">
<div>这里面一般情况下放的是各种div格式等等 , 在这里我们通过id把这些格式拿到下面去定义 这是jTemplates的语法</div>
</div>
<!-- 明星MV -->
<textarea id="tplMMSList" style="display: none; overflow: auto; height:50px;">
<div class="main_ssf_l2"> //这个div就是上面所说的 "格式"
{#foreach $T.table as record} // 这是 jTemplates 的 特殊写法 意思是 for循环 找到table(是从查询数据库的table中取到的)
<div class="main_ssf_l2d">
<div class="main_ssf_l2dimg"><a target=_blank href = "<%=request.getContextPath()%>/jsp/index_mv.jsp?id={$T.record.id}"><img style="height:95px" width="126px" src="{$T.record.minPic}" /></a></div> //用{$T.record.minPic} 这种写法 获取 属性值
<div class="main_ssf_l2dintro" id="ltitle" style="width:135px; height:24px; line-height:24px; overflow:hidden;" ><a target=_blank href = "<%=request.getContextPath()%>/jsp/index_mv.jsp?id={$T.record.id}">{$T.record.title}</a></div>
</div>
{#/for} //for 循环结束
</div>
</textarea>
//以上就是界面展示的所有内容~~~~~~~~~~~~~~~~~~~~~~~~~~~!~~~~~~~~~~~~~~~~~~~~~
后台: 所谓后台也是写在jsp中 也就是 查询数据的过程
格式如下:
<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@page import="com.turing.framework.dao.Dao"%>
<%@page import="com.turing.framework.dao.DaoImpl"%>
<%@page import="java.util.*"%>
<% Dao dao = new DaoImpl(); %>
<%
List list = dao.executeQueryForList("select * from(select ff.*,rownum rr from (select * from ouou_funchannel_video pp where CLASSID = 2 order by to_date(pp.createdate,'yyyy-MM-dd HH24:mi:ss') desc )ff ) where rr > 0 and rr <= 5");
java.util.Map map0 = (java.util.Map)list.get(0);
java.util.Map map1 = (java.util.Map)list.get(1);
java.util.Map map2 = (java.util.Map)list.get(2);
java.util.Map map3 = (java.util.Map)list.get(3);
java.util.Map map4 = (java.util.Map)list.get(4);
%>
{result:"1",returnval:"完成",fpic:"<%=map0.get("PICTURE") %>",ftitle:"<%=map0.get("NAME")%>",fcontent:"<%=map0.get("ABOUT")%>",fvideo:"<%=map0.get("FUNNYVIDEO") %>",id:"<%=map0.get("IDX") %>",table:[
{id :"1",minPic:"<%=map1.get("PICTURE")%>",name :"<%=map1.get("NAME")%>",about:"<%=map1.get("ABOUT")%>",video:"<%=map1.get("FUNNYVIDEO") %>",id:"<%=map1.get("IDX") %>"},
{id :"2",minPic:"<%=map2.get("PICTURE")%>",name :"<%=map2.get("NAME")%>",about:"<%=map2.get("ABOUT")%>",video:"<%=map2.get("FUNNYVIDEO") %>",id:"<%=map2.get("IDX") %>"},
{id :"3",minPic:"<%=map3.get("PICTURE")%>",name :"<%=map3.get("NAME")%>",about:"<%=map3.get("ABOUT")%>",video:"<%=map3.get("FUNNYVIDEO") %>",id:"<%=map3.get("IDX") %>"},
{id :"4",minPic:"<%=map4.get("PICTURE")%>",name :"<%=map4.get("NAME")%>",about:"<%=map4.get("ABOUT")%>",video:"<%=map4.get("FUNNYVIDEO") %>",id:"<%=map4.get("IDX") %>"}
]}
//以上是 查询数据的 过程
补充说明: 对于jquery插件jTemplates 是适用于 制作网站 或者在前台界面 有大量图片 视频 这样的界面 时候 需要 用jquery插件jTemplates 这个插件, 好处在于 当有大量图片或者视频的时候, 由于查询速度较慢 会影响 用户体验效果, 那么这种插件 就是先把 框子 展现出来 然后再查询图片, 这样的结构 比直接查询 快的很多