|
今天是Struts的最后一天了，主要講解了2個(gè)內(nèi)容，第一個(gè)是tiles標(biāo)簽和AJAX的一個(gè)框架JQuery，好了，就這倆個(gè)知識(shí)點(diǎn)，我來(lái)做一下總結(jié)：
Struts的tiles標(biāo)簽
下面開(kāi)始講解tiles標(biāo)簽，那么先引用2個(gè)問(wèn)題，什么是tiles標(biāo)簽，tiles標(biāo)簽有什么用？
什么是tiles標(biāo)簽：tiles標(biāo)簽是建立在JSP的include的基礎(chǔ)之上的一組標(biāo)簽。
tiles標(biāo)簽的作用：tiles標(biāo)簽為創(chuàng)建Web頁(yè)面提供了一種模板機(jī)制，使網(wǎng)頁(yè)的布局和網(wǎng)頁(yè)的內(nèi)容相分離。
實(shí)現(xiàn)tiles標(biāo)簽有兩種方式,第一種tiles模板方式，第二種tiles組件方式。
tiles模板應(yīng)用
首先，新建一個(gè)templet.jsp頁(yè)面，我們需要先定義一個(gè)模板，然后需要導(dǎo)入struts的tiles標(biāo)簽庫(kù)。示例：
- <%@ page language="java" pageEncoding="gbk"%>
- <%@taglib prefix="tiles" uri="/WEB-INF/struts-tiles.tld" %> <!--導(dǎo)入tiles標(biāo)簽庫(kù)-->
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
-
<head>
-
<base href="<%=basePath%>">
-
<title>My JSP 'templet.jsp' starting page</title>
-
</head>
-
-
<body>
-
<div id="all" style="height:500;background:green;">
-
<div id="top" style="height:100px;background:blue;">
-
<tiles:insert attribute="top"></tiles:insert><!--定義模板-->
-
</div>
-
<div id="left" style="height:50px;background:red;">
-
<tiles:insert attribute="left"></tiles:insert>
-
</div>
-
<div id="main" style="height:400px;background:yellow;">
-
<tiles:insert attribute="mian"></tiles:insert>
-
</div>
-
<div id="foot" style="height:100px;background:gray;">
-
<tiles:insert attribute="foot"></tiles:insert>
-
</div>
-
</div>
-
</body>
- </html>
上面，我們定義了一個(gè)網(wǎng)頁(yè)的模板，并對(duì)模板的布局做了定義，用tiles的insert標(biāo)簽來(lái)定義模板，attribute這個(gè)是定義一個(gè)屬性，到時(shí)候會(huì)根據(jù)這個(gè)屬性值來(lái)放置不同的網(wǎng)頁(yè)，
好了這一步做好了。
然后，我們就可以定義index頁(yè)面了，也就是根據(jù)我們定義的這個(gè)模板來(lái)顯示頁(yè)面了，示例代碼：
- <body>
-
<tiles:insert page="templet.jsp" flush="true">
-
<tiles:put name="top" value="jsp/top.jsp"></tiles:put>
-
<tiles:put name="left" value="jsp/left.jsp"></tiles:put>
-
<tiles:put name="main" value="jsp/main.jsp"></tiles:put>
-
<tiles:put name="foot" value="jsp/foot.jsp"></tiles:put>
-
</tiles:insert>
-
</body>
這里是主頁(yè)面，還是用tiles的insert標(biāo)簽來(lái)構(gòu)建主頁(yè)面，page屬性是指引用的哪個(gè)模板，這里就是我們剛剛定義的templet.jsp這個(gè)模板頁(yè)面，flush這里的意思是指先生成模板再生成頁(yè)面，接著用tiles的put標(biāo)簽來(lái)放置不同的頁(yè)面，這里的name就剛好對(duì)應(yīng)了模板中的attribute值，value的值是我們要放置哪些頁(yè)面進(jìn)去，這個(gè)就是使用模板的方式，我們可以瀏覽下index這個(gè)頁(yè)面就可以看到效果了。
tiles組件應(yīng)用
tiles組件是用xml配置的方式來(lái)放置頁(yè)面，更為靈活！
使用tiles組件的話，需要在struts-config.xml里面導(dǎo)入tiles插件，示例：
- <message-resources parameter="com.lovo.struts.ApplicationResources" />
-
<plug-in className="org.apache.struts.tiles.TilesPlugin">
-
<set-property property="definitions-config" value="/WEB-INF/tiles.xml" />
-
<set-property property="definitions-parser-validate" value="true" />
-
</plug-in>
注意加到message后面哦， <set-property property="definitions-config" value="/WEB-INF/tiles.xml" /> 這里定義配置文件的位置和名字，這里我們?cè)赪EB-INF下面新建一個(gè)tiles.xml文件，并用tiles1.0的dtd來(lái)約束，示例：
- <?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN" "tiles-config_1_1.dtd" >
- <tiles-definitions>
-
<definition name="index-definition" path="/templet.jsp">
-
<put name="top" value="jsp/top.jsp"></put>
-
<put name="left" value="jsp/left.jsp"></put>
-
<put name="main" value="jsp/main.jsp"></put>
-
<put name="foot" value="jsp/foot.jsp"></put>
-
</definition>
- </tiles-definitions>
這里，跟剛才的模板方式基本上一樣，path是模板的路徑，name是引用的名字，其他的跟剛才的index的主頁(yè)面是一樣的，好了，我們最后來(lái)看看怎么引用到這個(gè)配置文件。
這里的引用就很簡(jiǎn)單了，示例：
- <body>
-
<tiles:insert definition="index-definition"></tiles:insert>
-
</body>
這一句話就搞定了，引用的名稱是配置文件的name屬性，就能顯示出跟剛才一樣的效果了！
JQuery
這里，主要講很簡(jiǎn)單的幾個(gè)API，因?yàn)?，學(xué)了這些也是JQuery的入門知識(shí)，因?yàn)槭茿JAX的框架，那么就來(lái)使用JQuery來(lái)進(jìn)行異步的數(shù)據(jù)提交吧！
主要使用的方法是$.post和$.get,具體的使用:
- $(document).ready(function(){
-
$("#tj").click(ss);
給tj這個(gè)按鈕加一個(gè)事件，具體操作調(diào)用下面的ss函數(shù)
-
});
-
function ss(){
-
var url="look.do";
定義url提交路徑
-
var date={"name":$("#name").val()};
josn數(shù)據(jù)提交方式
-
$.post(url,date,show); 提交show是指回調(diào)函數(shù)具體操作下面的show函數(shù)
-
}
-
-
function show(dates){
-
alert(dates);
打印服務(wù)器返回的結(jié)果
-
}
具體頁(yè)面
- <body>
-
<input type="button" id="tj" value="提交" />
- </body>
好了，今天就先講到這！
|
