js使用xml数据载体实现城市省份二级联动效果
本文实例为大家分享了使用xml数据载体实现城市省份二级联动的具体代码，供大家参考，具体内容如下
首先写好前台页面testProvince.jsp，将请求通过open、send发送到服务器
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >
<title>二级联动</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
select{
width:111px;
}
</style>
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>湖南</option>
<option>广东</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
</body>
<script type="text/javascript">
//创建ajax对象
function createAjax(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
ajax = new XMLHttpRequest();
}catch(e1){
alert("请更换浏览器");
}
}
return ajax;
}
</script>
<script type="text/javascript">
document.getElementById("provinceID").onchange = function(){
//清空城市除了第一项
var cityElem = document.getElementById("cityID");
cityElem.options.length = 1;
//获取选中的省份
var province = this.value;
//进行编码处理
province = encodeURI(province);
if("选择省份" != province){
var ajax = createAjax();
//提交方式为GET
var method = "GET";
//提交路径为servlet路径
var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime()+
"&province=" +province;
//准备发送异步请求
ajax.open(method, url);
//由于是get请求，所以不需要设置请求头
//发送请求
ajax.send(null);
//监听服务器响应状态的变化
ajax.onreadystatechange = function(){
//响应状态为4 表示ajax已经完全接受到服务器的数据了
if(ajax.readyState == 4){
//接收到的数据正常
if(ajax.status == 200){
//获取服务器传来的html数据
var xmlDocument = ajax.responseXML;
//进行dom操作解析xml
//解析xml数据
var citys = xmlDocument.getElementsByTagName("city");
for(var i = 0; i< citys.length;i++){
//获取xml中的值 :不能用innerHTML,要用nodeValue
var city = citys[i].firstChild.nodeValue;
//创建option
var optElement = document.createElement("option");
optElement.innerHTML = city;
//获取city
var cityElems = document.getElementById("cityID");
cityElems.appendChild(optElement);
}
}
}
}
}
}
</script>
</html>
然后在后台ProvinceServlet中通过GET方式获取请求，将返回的数据以O（输出）流的方式发送出去,上面代码的ajax.responseXML获取输出的数据，并进行dom操作
public class ProvinceServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
String province = req.getParameter("province");
//重新编码
province = new String(province.getBytes("ISO-8859-1"),"utf-8");
//设置格式为xml
resp.setContentType("text/xml;charset=utf-8");
//获取字符输出流
PrintWriter pw = resp.getWriter();
//拼接xml头
pw.write("<?xml version='1.0' encoding='UTF-8'?>");
pw.write("<citys>");
if ("湖南".equals(province)) {
pw.write("<city>长沙</city>");
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("</citys>");
pw.flush();
pw.close();
}
}
运行结果如下:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript解析xml实现省市县三级联动的方法
本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.
-
JS制作简单的三级联动
用javascript制作的一个简单三级联动,非常简单实用 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省: <select style="wi
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
JS+XML 省份和城市之间的联动实现代码
xml:Provinces.xml 复制代码 代码如下: <?xml version="1.0"?> <Root> <Province ID="1" Name="安徽"> <City ID="1">安庆市</City> <City ID="2">蚌埠市</City> <City ID="3">
-
最好用的省市二级联动 原生js实现你值得拥有
复制代码 代码如下: <script language=javascript> cities = new Object(); cities['台湾']=new Array('台北','台南','其他'); cities['马来西亚']=new Array('Malaysia'); cities['北京']=new Array('北京'); cities['上海']=new Array('上海'); cities['天津']=new Array('天津'); cities['重庆']=new A
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
javascript读取Xml文件做一个二级联动菜单示例
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu2level.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进