省市联动
1、页面
<select name="province">
<option>选择省份</option>
</select>
<select name="city">
<option>选择城市</option>
</select>
2、Servlet
ProvinceServlet:当页面加载完毕后马上请求这个Servlet
需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端
3、页面的工作
获取这个字符串，使用逗号分隔，得到数组
循环遍历每个字符串（省份的名称），使用每个字符串创建一个<option>添加到<select name="province">这个元素中
4、CityServlet
CityServlet：当页面选择某个省时，发送请求
得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象。把这个元素转换成xml字符串，发送给客户端
5、页面的工作
把<select name="city">中所有子元素删除，但不要删除<option>选择城市</option>
得到服务器的响应结果：doc
获取所有的<city>子元素，循环遍历，得到<city>的内容
使用每个<city>的内容创建一个<option>元素，添加到<select name="city">
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");// 发送xml时这里要修改
/*
* 获取省份名称，加载该省对应的<province>元素 把元素转换成字符串发送给客户端
*/
/*
* 1、获取省份名称 2、使用省份名称查找到对应的<province>元素 3、把<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 + "']");// province[@name='a']
String xmlStr = proEle.asXML();// 把元素转换成字符串
response.getWriter().print(xmlStr);
} catch (DocumentException e) {
throw new RuntimeException(e);
}
}
}public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@SuppressWarnings("unchecked")
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 响应所有省份名称，使用逗号分隔
*/
/*
* 1、得到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");// xpath查找
// [//]没有深度查找province
// 查找它的name属性
StringBuilder sb = new StringBuilder();
for (int i = 0; i < arrList.size(); i++) {
sb.append(arrList.get(i).getValue());// 把每个属性的值存放到sb中
if (i < arrList.size() - 1) {
sb.append(",");
}
}
response.getWriter().print(sb);
} catch (DocumentException e) {
throw new RuntimeException(e);
}
}
}.jsp
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
} catch (e) {
alert("什么浏览器？");
throw e;
}
}
}
}
/*
1、在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中
2、在选择了新的省份时，发送请求(参数为省名称)，得到xml文档，即<province>元素
解析xml文档，得到其中所有的<city>,再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中
*/
window.onload = function() {
/*
ajax四步，请求ProvinceServlet,得到所有省份名称
使用每个省份名称创建一个<option>元素，添加到<select name="province">中
*/
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "<c:url value='/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.value = arr[i];//设置op的实际值为当前的省份名称
var textNode = document.createTextNode(arr[i]);//创建文本节点
op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
document.getElementById("p").appendChild(op);
}
}
};
/*
给<select name="province">添加改变监听
使用选择的省份名称请求CityServlet，得到<province>元素（xml元素）
获取<province>元素中所有的<city>元素，遍历之。获取每个<city>的文本内容，即市名称
使用每个市名称创建<option>元素添加到<select name="city">
*/
var proSelect = document.getElementById("p");
proSelect.onchange = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "<c:url value='/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就不循环
citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了
}
var doc = xmlHttp.responseXML;
//得到所有名为city的元素
var cityEleList = doc.getElementsByTagName("item");
//循环遍历每个city元素
for (var i = 0; i < cityEleList.length; i++) {
var cityEle = cityEleList[i];//得到每个city元素
var cityName;
if (window.addEventListener) {//处理浏览器的差异
cityName = cityEle.textContent;//支持FireFox等浏览器
} 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="item" ID="c">
<option>选择市</option>
</select>
</body>china.xml
<?xml version="1.0" encoding="utf-8"?>
<china>
<province name="北京">
<item>东城区</item>
<item>西城区</item>
<item>崇文区</item>
<item>宣武区</item>
<item>朝阳区</item>
<item>丰台区</item>
<item>石景山区</item>
<item>海淀区</item>
<item>门头沟区</item>
<item>房山区</item>
<item>通州区</item>
<item>顺义区</item>
<item>昌平区</item>
<item>大兴区</item>
<item>怀柔区</item>
<item>平谷区</item>
<item>密云县</item>
<item>延庆县</item>
</province>
<province name="天津">
<item>和平区</item>
<item>河东区</item>
<item>河西区</item>
<item>南开区</item>
<item>河北区</item>
<item>红桥区</item>
<item>塘沽区</item>
<item>汉沽区</item>
<item>大港区</item>
<item>东丽区</item>
<item>西青区</item>
<item>津南区</item>
<item>北辰区</item>
<item>武清区</item>
<item>宝坻区</item>
<item>宁河县</item>
<item>静海县</item>
<item>蓟县</item>
</province>
<province name="河北">
<item>石家庄</item>
<item>唐山</item>
<item>秦皇岛</item>
<item>邯郸</item>
<item>邢台</item>
<item>保定</item>
<item>张家口</item>
<item>承德</item>
<item>沧州</item>
<item>廊坊</item>
<item>衡水</item>
</province>
<province name="山西">
<item>太原</item>
<item>大同</item>
<item>阳泉</item>
<item>长治</item>
<item>晋城</item>
<item>朔州</item>
<item>晋中</item>
<item>运城</item>
<item>忻州</item>
<item>临汾</item>
<item>吕梁</item>
</province>
<province name="内蒙古">
<item>呼和浩特</item>
<item>包头</item>
<item>乌海</item>
<item>赤峰</item>
<item>通辽</item>
<item>鄂尔多斯</item>
<item>呼伦贝尔</item>
<item>巴彦淖尔</item>
<item>乌兰察布</item>
<item>兴安盟</item>
<item>锡林郭勒盟</item>
<item>阿拉善盟</item>
</province>
<province name="辽宁">
<item>沈阳</item>
<item>大连</item>
<item>鞍山</item>
<item>抚顺</item>
<item>本溪</item>
<item>丹东</item>
<item>锦州</item>
<item>营口</item>
<item>阜新</item>
<item>辽阳</item>
<item>盘锦</item>
<item>铁岭</item>
<item>朝阳</item>
<item>葫芦岛</item>
</province>
<province name="吉林">
<item>长春</item>
<item>吉林</item>
<item>四平</item>
<item>辽源</item>
<item>通化</item>
<item>白山</item>
<item>松原</item>
<item>白城</item>
<item>延边</item>
</province>
<province name="黑龙江">
<item>哈尔滨</item>
<item>齐齐哈尔</item>
<item>鸡西</item>
<item>鹤岗</item>
<item>双鸭山</item>
<item>大庆</item>
<item>伊春</item>
<item>佳木斯</item>
<item>七台河</item>
<item>牡丹江</item>
<item>黑河</item>
<item>绥化</item>
<item>大兴安岭</item>
</province>
<province name="上海">
<item>黄浦区</item>
<item>卢湾区</item>
<item>徐汇区</item>
<item>长宁区</item>
<item>静安区</item>
<item>普陀区</item>
<item>闸北区</item>
<item>虹口区</item>
<item>杨浦区</item>
<item>闵行区</item>
<item>宝山区</item>
<item>嘉定区</item>
<item>浦东新区</item>
<item>金山区</item>
<item>松江区</item>
<item>青浦区</item>
<item>南汇区</item>
<item>奉贤区</item>
<item>崇明县</item>
</province>
<province name="江苏">
<item>南京</item>
<item>无锡</item>
<item>徐州</item>
<item>常州</item>
<item>苏州</item>
<item>南通</item>
<item>连云港</item>
<item>淮安</item>
<item>盐城</item>
<item>扬州</item>
<item>镇江</item>
<item>泰州</item>
<item>宿迁</item>
</province>
<province name="浙江">
<item>杭州</item>
<item>宁波</item>
<item>温州</item>
<item>嘉兴</item>
<item>湖州</item>
<item>绍兴</item>
<item>金华</item>
<item>衢州</item>
<item>舟山</item>
<item>台州</item>
<item>丽水</item>
</province>
<province name="安徽">
<item>合肥</item>
<item>芜湖</item>
<item>蚌埠</item>
<item>淮南</item>
<item>马鞍山</item>
<item>淮北</item>
<item>铜陵</item>
<item>安庆</item>
<item>黄山</item>
<item>滁州</item>
<item>阜阳</item>
<item>宿州</item>
<item>巢湖</item>
<item>六安</item>
<item>亳州</item>
<item>池州</item>
<item>宣城</item>
</province>
<province name="福建">
<item>福州</item>
<item>厦门</item>
<item>莆田</item>
<item>三明</item>
<item>泉州</item>
<item>漳州</item>
<item>南平</item>
<item>龙岩</item>
<item>宁德</item>
</province>
<province name="江西">
<item>南昌</item>
<item>景德镇</item>
<item>萍乡</item>
<item>九江</item>
<item>新余</item>
<item>鹰潭</item>
<item>赣州</item>
<item>吉安</item>
<item>宜春</item>
<item>抚州</item>
<item>上饶</item>
</province>
<province name="山东">
<item>济南</item>
<item>青岛</item>
<item>淄博</item>
<item>枣庄</item>
<item>东营</item>
<item>烟台</item>
<item>潍坊</item>
<item>济宁</item>
<item>泰安</item>
<item>威海</item>
<item>日照</item>
<item>莱芜</item>
<item>临沂</item>
<item>德州</item>
<item>聊城</item>
<item>滨州</item>
<item>荷泽</item>
</province>
<province name="河南">
<item>郑州</item>
<item>开封</item>
<item>洛阳</item>
<item>平顶山</item>
<item>安阳</item>
<item>鹤壁</item>
<item>新乡</item>
<item>焦作</item>
<item>濮阳</item>
<item>许昌</item>
<item>漯河</item>
<item>三门峡</item>
<item>南阳</item>
<item>商丘</item>
<item>信阳</item>
<item>周口</item>
<item>驻马店</item>
</province>
<province name="湖北">
<item>武汉</item>
<item>黄石</item>
<item>十堰</item>
<item>宜昌</item>
<item>襄樊</item>
<item>鄂州</item>
<item>荆门</item>
<item>孝感</item>
<item>荆州</item>
<item>黄冈</item>
<item>咸宁</item>
<item>随州</item>
<item>恩施</item>
<item>神农架</item>
</province>
<province name="湖南">
<item>长沙</item>
<item>株洲</item>
<item>湘潭</item>
<item>衡阳</item>
<item>邵阳</item>
<item>岳阳</item>
<item>常德</item>
<item>张家界</item>
<item>益阳</item>
<item>郴州</item>
<item>永州</item>
<item>怀化</item>
<item>娄底</item>
<item>湘西</item>
</province>
<province name="广东">
<item>广州</item>
<item>韶关</item>
<item>深圳</item>
<item>珠海</item>
<item>汕头</item>
<item>佛山</item>
<item>江门</item>
<item>湛江</item>
<item>茂名</item>
<item>肇庆</item>
<item>惠州</item>
<item>梅州</item>
<item>汕尾</item>
<item>河源</item>
<item>阳江</item>
<item>清远</item>
<item>东莞</item>
<item>中山</item>
<item>潮州</item>
<item>揭阳</item>
<item>云浮</item>
</province>
<province name="广西">
<item>南宁</item>
<item>柳州</item>
<item>桂林</item>
<item>梧州</item>
<item>北海</item>
<item>防城港</item>
<item>钦州</item>
<item>贵港</item>
<item>玉林</item>
<item>百色</item>
<item>贺州</item>
<item>河池</item>
<item>来宾</item>
<item>崇左</item>
</province>
<province name="海南">
<item>海口</item>
<item>三亚</item>
</province>
<province name="重庆">
<item>重庆</item>
<item>万州区</item>
<item>涪陵区</item>
<item>渝中区</item>
<item>大渡口区</item>
<item>江北区</item>
<item>沙坪坝区</item>
<item>九龙坡区</item>
<item>南岸区</item>
<item>北碚区</item>
<item>万盛区</item>
<item>双桥区</item>
<item>渝北区</item>
<item>巴南区</item>
<item>黔江区</item>
<item>长寿区</item>
<item>綦江县</item>
<item>潼南县</item>
<item>铜梁县</item>
<item>大足县</item>
<item>荣昌县</item>
<item>璧山县</item>
<item>梁平县</item>
<item>城口县</item>
<item>丰都县</item>
<item>垫江县</item>
<item>武隆县</item>
<item>忠县</item>
<item>开县</item>
<item>云阳县</item>
<item>奉节县</item>
<item>巫山县</item>
<item>巫溪县</item>
<item>石柱土家族自治县</item>
<item>秀山土家族苗族自治县</item>
<item>酉阳土家族苗族自治县</item>
<item>彭水苗族土家族自治县</item>
<item>江津</item>
<item>合川</item>
<item>永川</item>
<item>南川</item>
</province>
<province name="四川">
<item>成都</item>
<item>自贡</item>
<item>攀枝花</item>
<item>泸州</item>
<item>德阳</item>
<item>绵阳</item>
<item>广元</item>
<item>遂宁</item>
<item>内江</item>
<item>乐山</item>
<item>南充</item>
<item>眉山</item>
<item>宜宾</item>
<item>广安</item>
<item>达州</item>
<item>雅安</item>
<item>巴中</item>
<item>资阳</item>
<item>阿坝</item>
<item>甘孜</item>
<item>凉山</item>
</province>
<province name="贵州">
<item>贵阳</item>
<item>六盘水</item>
<item>遵义</item>
<item>安顺</item>
<item>铜仁</item>
<item>黔西南</item>
<item>毕节</item>
<item>黔东南</item>
<item>黔南</item>
</province>
<province name="云南">
<item>昆明</item>
<item>曲靖</item>
<item>玉溪</item>
<item>保山</item>
<item>昭通</item>
<item>丽江</item>
<item>思茅</item>
<item>临沧</item>
<item>楚雄</item>
<item>红河</item>
<item>文山</item>
<item>西双版纳</item>
<item>大理</item>
<item>德宏</item>
<item>怒江</item>
<item>迪庆</item>
</province>
<province name="西藏">
<item>拉萨</item>
<item>昌都</item>
<item>山南</item>
<item>日喀则</item>
<item>那曲</item>
<item>阿里</item>
<item>林芝</item>
</province>
<province name="陕西">
<item>西安</item>
<item>铜川</item>
<item>宝鸡</item>
<item>咸阳</item>
<item>渭南</item>
<item>延安</item>
<item>汉中</item>
<item>榆林</item>
<item>安康</item>
<item>商洛</item>
</province>
<province name="甘肃">
<item>兰州</item>
<item>嘉峪关</item>
<item>金昌</item>
<item>白银</item>
<item>天水</item>
<item>武威</item>
<item>张掖</item>
<item>平凉</item>
<item>酒泉</item>
<item>庆阳</item>
<item>定西</item>
<item>陇南</item>
<item>临夏</item>
<item>甘南</item>
</province>
<province name="青海">
<item>西宁</item>
<item>海东</item>
<item>海北</item>
<item>黄南</item>
<item>海南</item>
<item>果洛</item>
<item>玉树</item>
<item>海西</item>
</province>
<province name="宁夏">
<item>银川</item>
<item>石嘴山</item>
<item>吴忠</item>
<item>固原</item>
<item>中卫</item>
</province>
<province name="新疆">
<item>乌鲁木齐</item>
<item>克拉玛依</item>
<item>吐鲁番</item>
<item>哈密</item>
<item>昌吉</item>
<item>博尔塔拉</item>
<item>巴音郭楞</item>
<item>阿克苏</item>
<item>克孜勒苏</item>
<item>喀什</item>
<item>和田</item>
<item>伊犁</item>
<item>塔城</item>
<item>阿勒泰</item>
<item>石河子</item>
<item>阿拉尔</item>
<item>图木舒克</item>
<item>五家渠</item>
</province>
<province name="香港">
<item>香港</item>
</province>
<province name="澳门">
<item>澳门</item>
</province>
<province name="台湾">
<item>台湾</item>
</province>
</china>