頁面:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
alert("您的浏覽器不支援");
throw e;
}
}
window.onload = function() {
//ajax四步,請求ProvinceServlet,得到所有的省份名稱
//使用每個省份名稱建立一個<option>元素,添加到<select name="province">中
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/Web/ProvinceServlet", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//擷取伺服器的響應
var text = xmlHttp.responseText;
//使用逗号分隔它,得到數組
var arr = text.split(",");
//循環周遊每個省份名稱,每個名稱生成一個option對象,添加到select中
for (var i = 0; i < arr.length; i++) {
//建立一個指定名稱元素
var op = document.createElement("option");
//設定op的實際值為目前的省份名稱
op.value = arr[i];
//建立文本節點
var textNode = document.createTextNode(arr[i]);
//把文本子節點添加到op元素中,指定其顯示值
op.appendChild(textNode);
document.getElementById("p").appendChild(op);
}
}
};
//給<select name="province">添加改變監聽
//使用選擇的省份名稱請求CityServlet,得到<province>元素(xml元素)
//擷取<province>元素中的所有的<city>元素,周遊,擷取每個<city>的文本内容,即市名
//使用每個市名建立<option>元素添加到<select name="province">中
var proSelect = document.getElementById("p");
proSelect,onchange = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "/Web/CityServlet", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//把下拉清單中選擇的值發送給伺服器
xmlHttp.send("pname=" + proSelect.value);
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//把select中的所有option移除(除了==請選擇==)
var citySelect = document.getElementById("c");
// 擷取其所有子元素
var optionEleList = citySelect.getElementsByTagName("option");
// 循環周遊每個option元素,然後在citySelect中移除
while(optionEleList.length > 1) {//子元素的個數如果大于1就循環,等于1就不循環了!
//總是删除1下标,因為1删除了,2就變成1了!
citySelect.removeChild(optionEleList[1]);
}
var doc = xmlHttp.responseXML;
// 得到所有名為city的元素
var cityEleList = doc.getElementsByTagName("city");
// 循環周遊每個city元素
for(var i = 0; i < cityEleList.length; i++) {
//得到每個city元素
var cityEle = cityEleList[i];
var cityName;
// 擷取市名稱
if(window.addEventListener) {//處理浏覽器的差異
//支援FireFox等浏覽器
cityName = cityEle.textContent;
} else {
cityName = cityEle.text;//支援IE
}
// 使用市名稱建立option元素,添加到<select name="city">中
var op = document.createElement("option");
op.value = cityName;
// 建立文本節點
var textNode = document.createTextNode(cityName);
op.appendChild(textNode);//把文本節點追加到op元素中
//把op添加到<select>元素中
citySelect.appendChild(op);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市關聯</h1>
<select name="province" id="p">
<option>==請選擇省==</option>
</select>
<select name="city" id="c">
<option>==請選擇市==</option>
</select>
</body>
</html>
ProvinceServlet:
package com.java.servlet;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.io.SAXReader;
public class ProvinceServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//相應所有省份名稱,使用逗号隔開
//Document對象 **建立解析器對象 ***調用解析器的讀方法,傳遞一個流對象,得到Document
try {
SAXReader reader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
//查詢所有province的name屬性,得到一堆的屬性對象
//循環周遊,把所有的屬性值連接配接成一個字元串,發送給用戶端
List<Attribute> arrList = doc.selectNodes("//province/@name");
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
//把每個屬性的值存放到sb中
sb.append(arrList.get(i).getValue());
if(i < arrList.size()-1) {
sb.append(",");
}
}
response.getWriter().print(sb);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
CityServlet
package com.java.servlet;
import java.io.IOException;
import java.io.InputStream;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
public class CityServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=utf-8");
//擷取省份名稱,加載該省對應的<province>元素
//把元素轉換成字元串發送給用戶端
//
//擷取省份名稱
//使用省份名稱查找到對應的<province>元素
//把<province>元素轉換成字元串,發送
try {
//得到Document
SAXReader reader = new SAXReader();
InputStream input = this.getClass().getResourceAsStream("/china.xml");
Document doc = reader.read(input);
//擷取參數
String pname = request.getParameter("pname");
Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']");
//把元素轉換成字元串
String xmlStr = proEle.asXML();
response.getWriter().print(xmlStr);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}