10_provincecity.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基於XML，以POST方式，完成省份-城市二級下拉聯動</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<select id="provinceID" style="width:111px">
<option>選擇省份</option>
<option>湖南</option>
<option>廣東</option>
</select>
<select id="cityID" style="width:111px">
<option>選擇城市</option>
</select>
<script type="text/javascript">
//定位省份下拉框，同時添加內容改變事件
document.getElementById("provinceID").onchange = function(){
//清空城市下拉框中的內容，除第一項外
var cityElement = document.getElementById("cityID");
cityElement.options.length = 1;
//獲取選中option標籤的索引號，從0開始
var index = this.selectedIndex;
//定位選中的option標籤
var optionElement = this[index];
//獲取選中的option標籤中的內容，即省份
var province = optionElement.innerHTML;
//如果選中的內容不是"選擇省份"
if("選擇省份" != province){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();
ajax.open(method,url);
//設置AJAX請求頭
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "province=" + province;
ajax.send(content);
//---------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)從AJAX異步對象中獲取服務器響應的xml文檔
var xmlDocument = ajax.responseXML;
//NO6)按照DOM規則，解析XML文檔
var cityElementArray = xmlDocument.getElementsByTagName("city");
var size = cityElementArray.length;
for(var i=0;i<size;i++){
//innerHTML只能用在html/jsp中，不能用在xml中
var city = cityElementArray[i].firstChild.nodeValue;
//<option></option>
var optionElement = document.createElement("option");
//<option>廣州</option>
optionElement.innerHTML = city;
//<select><option>廣州</option></select>
cityElement.appendChild(optionElement);
}
}
}
}
}
}
</script>
</body>
</html>package cn.itcast.javaee.js.provincecity;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 基於XML，以POST方式，完成省份-城市二級下拉聯動
* @author AdminTC
*/
public class ProvinceCityServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String province = request.getParameter("province");
//通知AJAX異步對象，服務器響應的數據爲xml格式的
response.setContentType("text/xml;charset=UTF-8");
//獲取字符輸出流
PrintWriter pw = response.getWriter();
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<root>");
if("廣東".equals(province)){
pw.write("<city>廣州</city>");
pw.write("<city>深圳</city>");
pw.write("<city>中山</city>");
}else if("湖南".equals(province)){
pw.write("<city>長沙</city>");
pw.write("<city>株洲</city>");
pw.write("<city>湘潭</city>");
pw.write("<city>岳陽</city>");
}
pw.write("</root>");
pw.flush();
pw.close();
}
}