1.选择省份后，自动加载省份对应的城市。
2.所有省份以及城市的信息保存在xml文件中。
原理：
当页面加载完毕后，XMLHttpRequest对象向一个servlet发出请求，请求省份及城市数据，获取数据后，将数据填充到对应的select标签中。提交表单后，表单也会请求另一个servlet处理该表单，获取城市与省份信息。
下面贴出代码：
1.jsp页面，为方便观看，js文件直接写入jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘responseXML.jsp‘ starting page</title>
<script type="text/javascript">
window.onload = function() {
var data = false;
var xhr = createXmlHttpRequest();
//请求服务端的一个servlet，该servlet可以读取xml文件，并将结果作为字符串返回。
xhr.open("get","${pageContext.request.contextPath}/servlet/ResponseXMLServlet?time="+new Date().getTime());
xhr.send(null);//由于是get请求所以发送数据为空
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200 || xhr.status == 304)
{
var xmlData = xhr.responseXML;//读取服务端返回的数据,是一个Object对象类型
//获取xmlData对象中所有的省份并添加到对应select节点里
var provinces = xmlData.getElementsByTagName("province");
for(var i = 0; i < provinces.length; i++)
{
//alert(provinces[i].getAttribute("name"));//取出xml文件中每个province节点的name属性值
var optionElement = document.createElement("option");//创建option节点
optionElement.setAttribute("value",provinces[i].getAttribute("name"));//设置option节点的value属性值
optionElement.innerText = provinces[i].getAttribute("name");//设置option标签的内部文本
document.getElementById("province").appendChild(optionElement);//加到select节点下
}
data = xmlData;//将服务端返回的数据赋值给全局变量data
}
}
}
document.getElementById("province").onchange = function()//为选择省份的select标签添加事件
{
//获取当前选择的省份
var province = document.getElementById("province").value;
//从xml数据中获取该省份下城市
var provinceElements = data.getElementsByTagName("province");
for(var i = 0; i < provinceElements.length; i++)
{
if(provinceElements[i].getAttribute("name") == province)
{
var cityElements = provinceElements[i].getElementsByTagName("city");
clearCitys();
for(var j = 0; j < cityElements.length;j++)
{
var optionElement = document.createElement("option");//生成option节点
optionElement.setAttribute("value",cityElements[j].firstChild.nodeValue);
optionElement.innerText = cityElements[j].firstChild.nodeValue;
document.getElementById("city").appendChild(optionElement);
}
}
}
}
}
function clearCitys(){ //清空城市信息
var city = document.getElementById(‘city‘);
city.options.length = 0;
city.options[0] = new Option(‘请选择城市...‘, ‘null_city‘);
}
function createXmlHttpRequest() {//创建XMLHttpRequest对象
var xmlHttp;
try { //Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try { //Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form action="${pageContext.request.contextPath }/servlet/HandFormServlet" method="post">
省份
<select name="province" id="province">
<option value="null_province">
请选择...
</option>
</select>
城市
<select name="city" id="city">
<option value="null_city">
请选择...
</option>
</select>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
获取xml文件信息并返回的servlet：
注：这里使用了dom4j读取一个xml文件（需要导入jar包）,其实也可以用javaI/O,因为这个servlet只用读取文件并不用解析。
package cn.edu.chd.web;
import java.io.File;
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;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
public class ResponseXMLServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
resp.setCharacterEncoding("utf-8");
// 告诉浏览器接收的是xml数据
resp.setContentType("application/xml;charset=utf-8");
PrintWriter writer = resp.getWriter();
// 获取代表省份和城市信息的xml文件
String realPath = this.getServletContext().getRealPath("/data/data.xml");
SAXReader reader = null;
try
{
reader = new SAXReader();
Document doc = reader.read(new File(realPath));
writer.println(doc.asXML());//将文档对象作为字符串返回
} catch (DocumentException e)
{
e.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doGet(req, resp);
}
}
保存省份与城市的xml：
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="吉林">
<city>长春</city>
<city>吉林市</city>
<city>通化</city>
<city>四平</city>
</province>
<province name="安徽">
<city>安庆</city>
<city>芜湖</city>
<city>合肥</city>
<city>六安</city>
</province>
<province name="江苏">
<city>南京</city>
<city>无锡</city>
<city>镇江</city>
<city>连云港</city>
</province>
<province name="山东">
<city>青岛</city>
<city>烟台</city>
<city>济南</city>
<city>威海</city>
</province>
</china>
处理表单的servlet：
注：为了方便，直接打印到控制台。
package cn.edu.chd.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HandFormServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String province = req.getParameter("province");
String city = req.getParameter("city");
System.out.println("province = "+province+",city = "+city);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doGet(req, resp);
}
}