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 相关文章推荐
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
小程序实现背景音乐播放和暂停
Jun 19 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
理解JavaScript中的事件
2006/09/23 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
九种原生js动画效果
2015/11/11 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Python中的推导式使用详解
2015/06/03 Python
python实现简单登陆流程的方法
2018/04/22 Python
python实现决策树分类
2018/08/30 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
法人授权委托书格式
2014/04/08 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
史上最牛辞职信
2015/05/13 职场文书
红高粱观后感
2015/06/10 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python