應用了Ajax重構
先編寫AjaxRequest.js文件存在JS文件夾中，具體代碼：
var net = new Object(); // 定義一個全局變量net
// 編寫構造函數
net.AjaxRequest = function(url, onload, onerror, method, params) {
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadDate(url, method, params);
}
// 編寫用於初始化XMLHttpRequest對象並指定處理函數，最後發送HTTP請求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
if (!method) {
method = "GET";
}
if (window.XMLHttpRequest) {
this.req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
this.req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req) {
try {
var loader = this;
this.req.onreadystatechange = function() {
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method, url, true);// 建立對服務器的調用
if (method == "POST") {// 如果提交方式爲POST
this.req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded"); // 設置請求頭
}
this.req.send(params); // 發送請求
} catch (err) {
this.onerror.call(this);
}
}
}
// 重構回調函數
net.AjaxRequest.onReadyState = function() {
var req = this.req;
var ready = req.readyState;
if (ready == 4) {// 請求完成
if (req.status == 200) {// 請求成功
this.onload.call(this);
} else {
this.onerror.call(this);
}
}
}
// 重構默認的錯誤處理函數
net.AjaxRequest.prototype.defaultError = function() {
alert("錯誤數據\n\n回調狀態:" + this.req.readyState + "\n狀態: " + this.req.status);
}然後編寫index.jsp文件，並在文件中包含AjaxRequest.js文件
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<title>級聯下拉列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
//獲取省份和直轄市
function getProvince(){
var loader=new net.AjaxRequest("ZoneServlet?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,onerror,"GET");
}
function deal_getProvince(){
provinceArr=this.req.responseText.split(","); //將獲取的省份名稱字符串分隔爲數組
for(i=0;i<provinceArr.length;i++){ //通過循環將數組中的省份名稱添加到下拉列表中
document.getElementById("province").options[i]=new Option(provinceArr[i],provinceArr[i]);
}
if(provinceArr[0]!=""){
getCity(provinceArr[0]); //獲取市縣
}
}
window.onload=function(){
getProvince(); //獲取省份和直轄市
}
//獲取市縣
function getCity(selProvince){
var loader=new net.AjaxRequest("ZoneServlet?action=getCity&parProvince="+selProvince+"&nocache="+new Date().getTime(),deal_getCity,onerror,"GET");
}
function deal_getCity(){
cityArr=this.req.responseText.split(","); //將獲取的市縣名稱字符串分隔爲數組
document.getElementById("city").length=0; //清空下拉列表
for(i=0;i<cityArr.length;i++){ //通過循環將數組中的市縣名稱添加到下拉列表中
document.getElementById("city").options[i]=new Option(cityArr[i],cityArr[i]);
}
}
function onerror(){} //錯誤處理函數
</script>
</head>
<body style="font-size: 20pt;">
請選擇：
<select name="province" id="province" onChange="getCity(this.value)">
</select>
-
<select name="city" id="city">
</select>
</body>
</html>編寫ZoneServlet，在doGet()方法中編寫代碼用於根據傳遞的不同action參數執行不同的處理方法，其中getProvince()方法從Map集合中獲取全部省份信息，並將獲取的省份信息連接爲一個逗號分隔的字符串，輸出到頁面上。getCity方法保存Map集合中獲取指定省份對應的市縣信息，然後用逗號隔開輸出到頁面上。
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ZoneServlet")
public class ZoneServlet extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String action=request.getParameter("action"); //獲取action參數的值
if("getProvince".equals(action)){ //獲取省份和直轄市信息
this.getProvince(request,response);
}else if("getCity".equals(action)){ //獲取市縣信息
this.getCity(request, response);
}
}
/**
* 獲取省份和直轄市
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void getProvince(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("GBK"); //設置響應的編碼方式
String result="";
CityMap cityMap=new CityMap();//實例化保存省份信息的CityMap類的實例
Map<String,String[]> map=cityMap.model;//獲取省份信息保存到Map中
Set<String> set=map.keySet(); //獲取Map集合中的鍵，並以Set集合返回
Iterator it=set.iterator();
while(it.hasNext()){ //將獲取的省份連接爲一個以逗號分隔的字符串
result=result+it.next()+",";
}
result=result.substring(0, result.length()-1); //去除最後一個逗號
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.print(result); //輸出獲取的省份字符串
out.flush();
out.close();
}
/**
* 獲取市縣
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
public void getCity(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("GBK"); //設置響應的編碼方式
String result="";
String selProvince=request.getParameter("parProvince"); //獲取選擇的省份
selProvince=new String(selProvince.getBytes("ISO-8859-1"),"GBK");
CityMap cityMap=new CityMap(); //實例化保存省份信息的CityMap類的實例
Map<String,String[]> map=cityMap.model; //獲取省份信息保存到Map中
String[]arrCity= map.get(selProvince); //獲取指定鍵的值
for(int i=0;i<arrCity.length;i++){ //將獲取的市縣連接爲一個以逗號分隔的字符串
result=result+arrCity[i]+",";
}
result=result.substring(0, result.length()-1); //去除最後一個逗號
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.print(result); //輸出獲取的市縣字符串
out.flush();
out.close();
}
}
這個是城市
import java.util.LinkedHashMap;
import java.util.Map;
public class CityMap {
/**
* 全國（省，直轄市，自治區，特別行政區）映射集合
*/
public static Map<String,String[]> model=new LinkedHashMap();
static{
model.put("北京", new String[]{"北京"});
model.put("上海", new String[]{"上海"});
model.put("天津", new String[]{"天津"});
model.put("重慶", new String[]{"重慶"});
model.put("黑龍江", new String[]{"哈爾濱","齊齊哈爾","牡丹江","大慶","伊春","雙鴨山","鶴崗","雞西","佳木斯","七臺河","黑河","綏化","大興安嶺"});
model.put("吉林", new String[]{"長春","延邊","吉林","白山","白城","四平","松原","遼源","大安","通化"});
model.put("遼寧", new String[]{"瀋陽","大連","葫蘆島","旅順","本溪","撫順","鐵嶺","遼陽","營口","阜新","朝陽","錦州","丹東","鞍山"});
model.put("內蒙古", new String[]{"呼和浩特","呼倫貝爾","錫林浩特","包頭","赤峯","海拉爾","烏海","鄂爾多斯","通遼"});
model.put("河北", new String[]{"石家莊","唐山","張家口","廊坊","邢臺","邯鄲","滄州","衡水","承德","保定","秦皇島"});
model.put("河南", new String[]{"鄭州","開封","洛陽","平頂山","焦作","鶴壁","新鄉","安陽","濮陽","許昌","漯河","三門峽","南陽","商丘","信陽","周口","駐馬店"});
model.put("山東", new String[]{"濟南","青島","淄博","威海","曲阜","臨沂","煙臺","棗莊","聊城","濟寧","菏澤","泰安","日照","東營","德州","濱州","萊蕪","濰坊"});
model.put("山西", new String[]{"太原","陽泉","晉城","晉中","臨汾","運城","長治","朔州","忻州","大同","呂梁"});
model.put("江蘇", new String[]{"南京","蘇州","崑山","南通","太倉","吳縣","徐州","宜興","鎮江","淮安","常熟","鹽城","泰州","無錫","連雲港","揚州","常州","宿遷"});
model.put("安徽", new String[]{"合肥","巢湖","蚌埠","安慶","六安","滁州","馬鞍山","阜陽","宣城","銅陵","淮北","蕪湖","毫州","宿州","淮南","池州"});
model.put("陝西", new String[]{"西安","韓城","安康","漢中","寶雞","咸陽","榆林","渭南","商洛","銅川","延安"});
model.put("寧夏", new String[]{"銀川","固原","中衛","石嘴山","吳忠"});
model.put("甘肅", new String[]{"蘭州","白銀","慶陽","酒泉","天水","武威","張掖","甘南","臨夏","平涼","定西","金昌"});
model.put("青海", new String[]{"西寧","海北","海西","黃南","果洛","玉樹","海東","海南"});
model.put("湖北", new String[]{"武漢","宜昌","黃岡","恩施","荊州","神農架","十堰","咸寧","襄樊","孝感","隨州","黃石","荊門","鄂州"});
model.put("湖南", new String[]{"長沙","邵陽","常德","郴州","吉首","株洲","婁底","湘潭","益陽","永州","岳陽","衡陽","懷化","韶山","張家界"});
model.put("浙江", new String[]{"杭州","湖州","金華","寧波","麗水","紹興","雁蕩山","衢州","嘉興","台州","舟山","溫州"});
model.put("江西", new String[]{"南昌","萍鄉","九江","上饒","撫州","吉安","鷹潭","宜春","新餘","景德鎮","贛州"});
model.put("福建", new String[]{"福州","廈門","龍巖","南平","寧德","莆田","泉州","三明","漳州"});
model.put("貴州", new String[]{"貴陽","安順","赤水","遵義","銅仁","六盤水","畢節","凱里","都勻"});
model.put("四川", new String[]{"成都","瀘州","內江","涼山","阿壩","巴中","廣元","樂山","綿陽","德陽","攀枝花","雅安","宜賓","自貢","甘孜州","達州","資陽","廣安","遂寧","眉山","南充"});
model.put("廣東", new String[]{"廣州","深圳","潮州","韶關","湛江","惠州","清遠","東莞","江門","茂名","肇慶","汕尾","河源","揭陽","梅州","中山","德慶","陽江","雲浮","珠海","汕頭","佛山"});
model.put("廣西", new String[]{"南寧","桂林","陽朔","柳州","梧州","玉林","桂平","賀州","欽州","貴港","防城港","百色","北海","河池","來賓","崇左"});
model.put("雲南", new String[]{"昆明","保山","楚雄","德宏","紅河","臨滄","怒江","曲靖","思茅","文山","玉溪","昭通","麗江","大理"});
model.put("海南", new String[]{"海口","三亞","儋州","瓊山","通什","文昌"});
model.put("新疆", new String[]{"烏魯木齊","阿勒泰","阿克蘇","昌吉","哈密","和田","喀什","克拉瑪依","石河子","塔城","庫爾勒","吐魯番","伊寧"});
}
}
大概流程就是用window.onload=function(){getProvince();}在頁面載入後顯示默認省份並且調取獲取省份的方法getProvince,然後在這個方法裏傳到ZoneServlet裏面的doGet中然後執行getProvince方法，當你選擇裏面的省份的時候，改變了列表裏面的元素，就用onChange=”getCity(this.value)”這個方法執行了getCity（）方法，之後是跟獲取省的一樣了。
寫這個代碼遇到的問題：
1. 一開始列表裏什麼都沒有了，找了半天原因覺得是AjaxRequest.js文件沒寫好，這個文件一開始我是直接在WebContent這個裏面建的，沒有新建一個JS文件夾，後來我就在WebContent這個裏面新建了一個JS文件夾，把這個AjaxRequest.js放在裏面，然後把index裏面的用這個文件的代碼改一下位置，就好了，我也不知道爲啥要放在新建的一個JS文件夾裏。
2. 出現了java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986這個錯誤提示，百度了半天找了幾個解決辦法，發現時Tomact版本問題，解決方案有配置tomcat的catalina.properties
添加或者修改：
tomcat.util.http.parser.HttpParser.requestTargetAllow=|{}
但是我用了還是不好使，只能換Tomact版本了。