js使用xml数据载体实现城市省份二级联动效果


Posted in Javascript onNovember 08, 2017

本文实例为大家分享了使用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(); 
 } 
}

运行结果如下:

js使用xml数据载体实现城市省份二级联动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
使用JS实现动态时钟
Mar 12 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 #Javascript
javascript自定义事件功能与用法实例分析
Nov 08 #Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 #Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 #Javascript
vue中实现滚动加载更多的示例
Nov 08 #Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
You might like
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
javascript如何实现暂停功能
2015/11/06 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
拖动时防止选中
2017/02/03 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
python友情链接检查方法
2015/07/08 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
django框架两个使用模板实例
2019/12/11 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
python3代码中实现加法重载的实例
2020/12/03 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
程序员岗位职责
2013/11/11 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
爱晚亭导游词
2015/02/09 职场文书
世界文化遗产导游词
2019/08/07 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技