问题出现:
今天做项目遇到这样的需求,每个页面header部分和body部分之间要有3张图片,中间部分的图片是静态的,而左右两侧需要从数据库动态查出,即广告位;
开始的思路:
如果单纯的是一个页面还好说,思路是在请求Action时,在相应方法中加入数据库查询方法,响应后接到list显示图片即可;
难题的出现:
但现在的情况是,有多个jsp页面需要接收这个list,也就是说,按原来的思路,首先需要将该部分做成公共jsp页面,使用<%@ include file="/include/advertising.jsp" %>进行包含使用,其次在所有涉及该广告显示的jsp页面链接请求的Action中加入数据库查询方法;
想想这个工作量有多大,而且在团队合作开发的今天,我在别人完成的代码的基础上加入某些代码,稍不留意就会有遗漏,导致项目出现问题!
最终的解决方案(最好的)
怎么办呢?Ajax!!神奇的Ajax!!对我来说Ajax显得很陌生,即便做了半年多的web开发,即便Ajax在web开发中应用很广泛,到了今天我才真正认识到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();
}
就是这样,所有想似复杂和看似复杂的问题就这样解决了;
当然,Ajax的应用远没有这样简单,还有很多复杂的方法和原理我还没有见过,慢慢学习吧!
posted on 2012-03-23 14:13
canry Tong 阅读(2099)
评论(1) 编辑 收藏 所属分类:
Ajax简单应用