博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax做省市联动
阅读量:5745 次
发布时间:2019-06-18

本文共 16049 字,大约阅读时间需要 53 分钟。

原理:

 当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表示无限深度查询,/表示子节点			List
arrList = 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

东城区
西城区
崇文区
宣武区
朝阳区
丰台区
石景山区
海淀区
门头沟区
房山区
通州区
顺义区
昌平区
大兴区
怀柔区
平谷区
密云县
延庆县
和平区
河东区
河西区
南开区
河北区
红桥区
塘沽区
汉沽区
大港区
东丽区
西青区
津南区
北辰区
武清区
宝坻区
宁河县
静海县
蓟县
石家庄
唐山
秦皇岛
邯郸
邢台
保定
张家口
承德
沧州
廊坊
衡水
太原
大同
阳泉
长治
晋城
朔州
晋中
运城
忻州
临汾
吕梁
呼和浩特
包头
乌海
赤峰
通辽
鄂尔多斯
呼伦贝尔
巴彦淖尔
乌兰察布
兴安盟
锡林郭勒盟
阿拉善盟
沈阳
大连
鞍山
抚顺
本溪
丹东
锦州
营口
阜新
辽阳
盘锦
铁岭
朝阳
葫芦岛
长春
吉林
四平
辽源
通化
白山
松原
白城
延边
哈尔滨
齐齐哈尔
鸡西
鹤岗
双鸭山
大庆
伊春
佳木斯
七台河
牡丹江
黑河
绥化
大兴安岭
黄浦区
卢湾区
徐汇区
长宁区
静安区
普陀区
闸北区
虹口区
杨浦区
闵行区
宝山区
嘉定区
浦东新区
金山区
松江区
青浦区
南汇区
奉贤区
崇明县
南京
无锡
徐州
常州
苏州
南通
连云港
淮安
盐城
扬州
镇江
泰州
宿迁
杭州
宁波
温州
嘉兴
湖州
绍兴
金华
衢州
舟山
台州
丽水
合肥
芜湖
蚌埠
淮南
马鞍山
淮北
铜陵
安庆
黄山
滁州
阜阳
宿州
巢湖
六安
亳州
池州
宣城
福州
厦门
莆田
三明
泉州
漳州
南平
龙岩
宁德
南昌
景德镇
萍乡
九江
新余
鹰潭
赣州
吉安
宜春
抚州
上饶
济南
青岛
淄博
枣庄
东营
烟台
潍坊
济宁
泰安
威海
日照
莱芜
临沂
德州
聊城
滨州
荷泽
郑州
开封
洛阳
平顶山
安阳
鹤壁
新乡
焦作
濮阳
许昌
漯河
三门峡
南阳
商丘
信阳
周口
驻马店
武汉
黄石
十堰
宜昌
襄樊
鄂州
荆门
孝感
荆州
黄冈
咸宁
随州
恩施
神农架
长沙
株洲
湘潭
衡阳
邵阳
岳阳
常德
张家界
益阳
郴州
永州
怀化
娄底
湘西
广州
韶关
深圳
珠海
汕头
佛山
江门
湛江
茂名
肇庆
惠州
梅州
汕尾
河源
阳江
清远
东莞
中山
潮州
揭阳
云浮
南宁
柳州
桂林
梧州
北海
防城港
钦州
贵港
玉林
百色
贺州
河池
来宾
崇左
海口
三亚
重庆
万州区
涪陵区
渝中区
大渡口区
江北区
沙坪坝区
九龙坡区
南岸区
北碚区
万盛区
双桥区
渝北区
巴南区
黔江区
长寿区
綦江县
潼南县
铜梁县
大足县
荣昌县
璧山县
梁平县
城口县
丰都县
垫江县
武隆县
忠县
开县
云阳县
奉节县
巫山县
巫溪县
石柱土家族自治县
秀山土家族苗族自治县
酉阳土家族苗族自治县
彭水苗族土家族自治县
江津
合川
永川
南川
成都
自贡
攀枝花
泸州
德阳
绵阳
广元
遂宁
内江
乐山
南充
眉山
宜宾
广安
达州
雅安
巴中
资阳
阿坝
甘孜
凉山
贵阳
六盘水
遵义
安顺
铜仁
黔西南
毕节
黔东南
黔南
昆明
曲靖
玉溪
保山
昭通
丽江
思茅
临沧
楚雄
红河
文山
西双版纳
大理
德宏
怒江
迪庆
拉萨
昌都
山南
日喀则
那曲
阿里
林芝
西安
铜川
宝鸡
咸阳
渭南
延安
汉中
榆林
安康
商洛
兰州
嘉峪关
金昌
白银
天水
武威
张掖
平凉
酒泉
庆阳
定西
陇南
临夏
甘南
西宁
海东
海北
黄南
海南
果洛
玉树
海西
银川
石嘴山
吴忠
固原
中卫
乌鲁木齐
克拉玛依
吐鲁番
哈密
昌吉
博尔塔拉
巴音郭楞
阿克苏
克孜勒苏
喀什
和田
伊犁
塔城
阿勒泰
石河子
阿拉尔
图木舒克
五家渠
香港
澳门
台湾

  

效果:

 

选择一个省份,弹出市级列表

 

转载地址:http://vlxzx.baihongyu.com/

你可能感兴趣的文章
C语言及程序设计提高例程-35 使用指针操作二维数组
查看>>
华大基因BGI Online的云计算实践
查看>>
深入理解自定义Annotation,实现ButterKnif小原理
查看>>
排序高级之交换排序_冒泡排序
查看>>
Cocos2d-x3.2 Ease加速度
查看>>
[EntLib]关于SR.Strings的使用办法[加了下载地址]
查看>>
中小型网站架构分析及优化
查看>>
写shell的事情
查看>>
负载均衡之Haproxy配置详解(及httpd配置)
查看>>
linux虚拟机拷贝之后联网出错
查看>>
Linux文件系统探索
查看>>
标准与扩展ACL 、 命名ACL 、 总结和答疑
查看>>
查找恶意的TOR中继节点
查看>>
MAVEN 属性定义与使用
查看>>
hadoop2.7.2 HA搭建
查看>>
shell高级视频答学生while循环问题
查看>>
无法SSH到Ubuntu
查看>>
使用@media实现IE hack的方法
查看>>
《11招玩转网络安全》之第一招:Docker For Docker
查看>>
hive_0.11中文用户手册
查看>>