問題出現(xiàn)：
今天做項(xiàng)目遇到這樣的需求，每個頁面header部分和body部分之間要有3張圖片，中間部分的圖片是靜態(tài)的，而左右兩側(cè)需要從數(shù)據(jù)庫動態(tài)查出，即廣告位；
開始的思路：
如果單純的是一個頁面還好說，思路是在請求Action時，在相應(yīng)方法中加入數(shù)據(jù)庫查詢方法，響應(yīng)后接到list顯示圖片即可；
難題的出現(xiàn)：
但現(xiàn)在的情況是，有多個jsp頁面需要接收這個list，也就是說，按原來的思路，首先需要將該部分做成公共jsp頁面，使用<%@ include file="/include/advertising.jsp" %>進(jìn)行包含使用，其次在所有涉及該廣告顯示的jsp頁面鏈接請求的Action中加入數(shù)據(jù)庫查詢方法；
想想這個工作量有多大，而且在團(tuán)隊(duì)合作開發(fā)的今天，我在別人完成的代碼的基礎(chǔ)上加入某些代碼，稍不留意就會有遺漏，導(dǎo)致項(xiàng)目出現(xiàn)問題！
最終的解決方案(最好的)
怎么辦呢？Ajax！！神奇的Ajax！！對我來說Ajax顯得很陌生，即便做了半年多的web開發(fā)，即便Ajax在web開發(fā)中應(yīng)用很廣泛，到了今天我才真正認(rèn)識到Ajax的力量！貼代碼吧，見證“我的Ajax”：
公共頁面advertising.jsp代碼：
<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<script type="text/javascript">
//<![CDATA[
$(function(){
var url1 = "/getAdAdvertisingAction.do";
$.get(url1,function call(data){
var array = data.split(",");
document.getElementById("left_ad01").src = array[0];
document.getElementById("left_ad02").src = array[1];
});
});
//]]>
</script>
<ul id="banner">
<li class="ml_0"><img id="left_ad01" width="173" height="90" src="/images/banner/img01_banner.png" alt="廣告" /></li>
<li><img src="/images/banner/img02_banner.png" alt="廣告" /></li>
<li><img id="left_ad02" width="173" height="90" src="/images/banner/img03_banner.png" alt="廣告" /></li>
</ul>
引用頁main.jsp代碼(多個頁面引用，這里以main.jsp為例)：
<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<html>
<title></title>
<head></head>
<body>
<%@ include file="/include/header.jsp" %>
<%@ include file="/include/advertising.jsp" %>
<div></div>
<%@ include file="/include/footer.jsp" %>
</boday>
</html>
后臺Action.java代碼：
public void getAd() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
List<DragonAdvertising> adList = dragonAdvertisingService.webList(pager, "1", "1", 1);
List<DragonAdvertising> adList1 = dragonAdvertisingService.webList(pager, "1", "2", 1);
response.getWriter().write("/"+adList.get(0).getAD_FILE_PATH()+","+"/"+adList1.get(0).getAD_FILE_PATH());
response.getWriter().close();
}
就是這樣，所有想似復(fù)雜和看似復(fù)雜的問題就這樣解決了；
當(dāng)然，Ajax的應(yīng)用遠(yuǎn)沒有這樣簡單，還有很多復(fù)雜的方法和原理我還沒有見過，慢慢學(xué)習(xí)吧！
posted on 2012-03-23 14:13
canry Tong 閱讀(2109)
評論(1) 編輯 收藏 所屬分類:
Ajax簡單應(yīng)用