原理:
当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据)。然后使用每个省份名称创建<option>,添加到<select name=”province”>中。
并且为<select name=”province”>元素添加onchange事件监听。当选择的省份发生变化时,再向服务器发送异常请求,得到当前选中的省份下所有城市(XML数据)。然后客户端解析XML文档,使用每个城市名称创建<option>,添加到<select name=”city”>元素中。
代码实现:
前端页面
Web04\WebContent\ajax\select.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>My JSP 'ajax5.jsp' starting page 省市联动
处理省份的servlet
Web04\src\ajax\ProvinceServlet.java
package ajax;import java.io.IOException;import java.io.InputStream;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;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.DocumentException;import org.dom4j.io.SAXReader;/** * Servlet implementation class ProvinceServlet */@WebServlet("/ProvinceServlet")public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); try { //创建解析器对象 SAXReader reader = new SAXReader(); //得到输入流 InputStream input = this.getClass().getResourceAsStream("/china.xml"); //得到document对象 Document doc = reader.read(input); //查询所有的province的name属性,//province表示无限深度查询,/表示子节点 ListarrList = doc.selectNodes("//province/@name"); //将所有的省份名称用逗号连接起来 StringBuilder sb = new StringBuilder(); for(int i=0;i
处理市数据的servlet
Web04\src\ajax\CityServlet.java
package ajax;import java.io.IOException;import java.io.InputStream;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;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;/** * Servlet implementation class CityServlet */@WebServlet("/CityServlet")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"); //注意:发送xml这里要修改!!! response.setContentType("text/xml;charset=utf-8"); try { //创建解析器对象 SAXReader reader = new SAXReader(); //得到输入流 InputStream input = this.getClass().getResourceAsStream("/china.xml"); //得到document对象 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(); } }}
Web04\src\china.xml
东城区 西城区 崇文区 宣武区 朝阳区 丰台区 石景山区 海淀区 门头沟区 房山区 通州区 顺义区 昌平区 大兴区 怀柔区 平谷区 密云县 延庆县 和平区 河东区 河西区 南开区 河北区 红桥区 塘沽区 汉沽区 大港区 东丽区 西青区 津南区 北辰区 武清区 宝坻区 宁河县 静海县 蓟县 石家庄 唐山 秦皇岛 邯郸 邢台 保定 张家口 承德 沧州 廊坊 衡水 太原 大同 阳泉 长治 晋城 朔州 晋中 运城 忻州 临汾 吕梁 呼和浩特 包头 乌海 赤峰 通辽 鄂尔多斯 呼伦贝尔 巴彦淖尔 乌兰察布 兴安盟 锡林郭勒盟 阿拉善盟 沈阳 大连 鞍山 抚顺 本溪 丹东 锦州 营口 阜新 辽阳 盘锦 铁岭 朝阳 葫芦岛 长春 吉林 四平 辽源 通化 白山 松原 白城 延边 哈尔滨 齐齐哈尔 鸡西 鹤岗 双鸭山 大庆 伊春 佳木斯 七台河 牡丹江 黑河 绥化 大兴安岭 黄浦区 卢湾区 徐汇区 长宁区 静安区 普陀区 闸北区 虹口区 杨浦区 闵行区 宝山区 嘉定区 浦东新区 金山区 松江区 青浦区 南汇区 奉贤区 崇明县 南京 无锡 徐州 常州 苏州 南通 连云港 淮安 盐城 扬州 镇江 泰州 宿迁 杭州 宁波 温州 嘉兴 湖州 绍兴 金华 衢州 舟山 台州 丽水 合肥 芜湖 蚌埠 淮南 马鞍山 淮北 铜陵 安庆 黄山 滁州 阜阳 宿州 巢湖 六安 亳州 池州 宣城 福州 厦门 莆田 三明 泉州 漳州 南平 龙岩 宁德 南昌 景德镇 萍乡 九江 新余 鹰潭 赣州 吉安 宜春 抚州 上饶 济南 青岛 淄博 枣庄 东营 烟台 潍坊 济宁 泰安 威海 日照 莱芜 临沂 德州 聊城 滨州 荷泽 郑州 开封 洛阳 平顶山 安阳 鹤壁 新乡 焦作 濮阳 许昌 漯河 三门峡 南阳 商丘 信阳 周口 驻马店 武汉 黄石 十堰 宜昌 襄樊 鄂州 荆门 孝感 荆州 黄冈 咸宁 随州 恩施 神农架 长沙 株洲 湘潭 衡阳 邵阳 岳阳 常德 张家界 益阳 郴州 永州 怀化 娄底 湘西 广州 韶关 深圳 珠海 汕头 佛山 江门 湛江 茂名 肇庆 惠州 梅州 汕尾 河源 阳江 清远 东莞 中山 潮州 揭阳 云浮 南宁 柳州 桂林 梧州 北海 防城港 钦州 贵港 玉林 百色 贺州 河池 来宾 崇左 海口 三亚 重庆 万州区 涪陵区 渝中区 大渡口区 江北区 沙坪坝区 九龙坡区 南岸区 北碚区 万盛区 双桥区 渝北区 巴南区 黔江区 长寿区 綦江县 潼南县 铜梁县 大足县 荣昌县 璧山县 梁平县 城口县 丰都县 垫江县 武隆县 忠县 开县 云阳县 奉节县 巫山县 巫溪县 石柱土家族自治县 秀山土家族苗族自治县 酉阳土家族苗族自治县 彭水苗族土家族自治县 江津 合川 永川 南川 成都 自贡 攀枝花 泸州 德阳 绵阳 广元 遂宁 内江 乐山 南充 眉山 宜宾 广安 达州 雅安 巴中 资阳 阿坝 甘孜 凉山 贵阳 六盘水 遵义 安顺 铜仁 黔西南 毕节 黔东南 黔南 昆明 曲靖 玉溪 保山 昭通 丽江 思茅 临沧 楚雄 红河 文山 西双版纳 大理 德宏 怒江 迪庆 拉萨 昌都 山南 日喀则 那曲 阿里 林芝 西安 铜川 宝鸡 咸阳 渭南 延安 汉中 榆林 安康 商洛 兰州 嘉峪关 金昌 白银 天水 武威 张掖 平凉 酒泉 庆阳 定西 陇南 临夏 甘南 西宁 海东 海北 黄南 海南 果洛 玉树 海西 银川 石嘴山 吴忠 固原 中卫 乌鲁木齐 克拉玛依 吐鲁番 哈密 昌吉 博尔塔拉 巴音郭楞 阿克苏 克孜勒苏 喀什 和田 伊犁 塔城 阿勒泰 石河子 阿拉尔 图木舒克 五家渠 香港 澳门 台湾
效果:
选择一个省份,弹出市级列表