Posted on 2009-06-28 22:36
Gavin.lee 閱讀(2360)
評論(1) 編輯 收藏 所屬分類:
web 積累（前端 + 后臺）
處理動態的二級聯動菜單，宗旨，通過ajax異步提交，將通過java業務處理（一些getxx的業務處理方法就省略了）的聯動數據，再通過ajax塞到jsp里
showSubSpace.jsp：接收數據顯示聯動效果，這個頁面需要初始化自動加載JS <body onload="showSubSpace()"> *** </body>
findallSpace.tag：部署在WEB-INF/tags/下，即通過標記文件來獲取板塊信息，初始化頁面信息
showSubSpace.js：異步提交，用來響應JSP中異步發起請求的，也是ajax-base.js的應用。負責將數據塞到頁面
ajax-base.js：ajax框架
ShowSubSpaceServlet.java：獲取后臺數據
show.jsp
<%
@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="mytag" tagdir="/WEB-INF/tags/" %>
<!-- 刪除二級版塊操作區-->
<div class="delete_first_conker" id="operate2" style="display:none">
<form action="deletesecondconker.do">
<table class="delete_firstconker_table" cellpadding="0" cellspacing="0">
<tr>
<td class="fronttd"></td>
<td class="centertd"></td>
<td class="lasttd"></td>
</tr>
<tr>
<td class="fronttd">一級版塊</td>
<td class="centertd">
<select name="superSpaceId" style="width:150px;" id="firstSpace" onchange="showSubSpace()">
<mytag:findallSpace/>
<c:forEach items="${first}" var="f">
<option value="${f.id }" >${f.name}</option>
</c:forEach>
</select>
</td>
<td class="lasttd">*請選擇一級版塊</td>
</tr>
<tr>
<td class="fronttd">二級版塊</td>
<td class="centertd" id="subSpaceSelect">
</td>
<td class="lasttd">*請選擇二級版塊</td>
</tr>
<tr>
<td class="fronttd"></td>
<td class="centertd"><input type="image" src="images/button/delete_board.JPG" /></td>
<td class="lasttd"></td>
</tr>
<tr>
<td class="fronttd"></td>
<td class="centertd"></td>
<td class="lasttd"></td>
</tr>
</table>
</form>
</div>
findallSpace.tag
<%@ tag body-content="empty" %>
<%@ tag import="com.handson.bbs.model.*,java.util.*,com.handson.bbs.bo.SpaceBO" %>
<%
SpaceBO spaceBo = SpaceBO.getInstance();
List<Space> first = spaceBo.getFirstSpace();
request.setAttribute("first",first);
%>
showSubSpace.js
function $(id){
return document.getElementById(id);
}
function showSubSpace() {
var superSpaceId = document.getElementById('firstSpace').value;
var url = 'showsubspace.do?superSpaceId=' + superSpaceId + '&timstamp=' + new Date().getTime();
//var url = 'showsubspace.do';
var ajaxService = new AjaxRequest(url, function(xmlRequest) {
var resp = xmlRequest.responseText;
$("subSpaceSelect").innerHTML = resp;
}, "GET");
//encodeURIComponent or encodeURI
//ajaxService.content = "superSpaceId=" + superSpaceId;
ajaxService.send();
}
ajax-base.js
/**//**
* My AJAX service supported base lib
* Author: Gavin.lee
* Date: 23/07/2007
*/
/**//**
* AjaxRequest is used to send request based on xml http
* URL: the url of request
* callback: the callback function to process response xml http request
* method: GET/POST, default value is POST, it can be ignored.
*/
/**//*
// for example:
function checkUser() {
var username = document.getElementById("username").value;
var url = 'ajax.do?method=checkUser&username=' + username;
var ajaxService = new AjaxRequest(url, function(xmlRequest) {
var msgDiv = document.getElementById("msgDiv");
alert(xmlRequest.responseText);
msgDiv.innerHTML = xmlRequest.responseText;
});
ajaxService.send();
}
*/
function $(id){
return document.getElementById(id);
}
function AjaxRequest(URL, callback, method) {
this.URL = "";
this.method = "POST";
this.async = true;
this.content = null;
this.callback = function(xmlObj) {}
var xmlHttpRequest;
var objSelf = this;
if(URL) {
this.URL = URL;
}
if(callback) {
this.callback = callback;
}
if(method) {
this.method = method;
}
if (window.XMLHttpRequest) { // Non-IE browser
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttpRequest) {
xmlHttpRequest.onreadystatechange = function() {
if(xmlHttpRequest.readyState == 4) { //server complete
if(xmlHttpRequest.status == 200) { // OK response
objSelf.callback(xmlHttpRequest);
} else {
alert("XMLHttpRequest problem: " + xmlHttpRequest.statusText);
}
}
};
}
this.send = function() {
if(!this.method || !this.URL || !this.async) {
return;
}
try {
xmlHttpRequest.open(this.method, this.URL, this.async);
if(this.method.toUpperCase() == 'POST') {
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xmlHttpRequest.send(this.content);
} catch (e) {
alert("XMLHttpRequest problem: " + e);
}
};
}
ShowSubSpaceServlet.java web.xml中需要對此進行映射，呵，這個就不啰嗦了。
package com.handson.bbs.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.handson.bbs.bo.SpaceBO;
import com.handson.bbs.model.Space;
public class ShowSubSpaceServlet extends BaseServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String superSpaceId = request.getParameter("superSpaceId");
List<Space> subSpaceList = new ArrayList<Space>();
SpaceBO spaceBo = SpaceBO.getInstance();
subSpaceList = spaceBo.findSpaceBySpuerId(Integer.parseInt(superSpaceId));
request.setAttribute("subSpaceList", subSpaceList);
this.forward(request, response, "/showSubSpace.jsp");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}