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 Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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+DBM的同学录程序(5)
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript call方法使用说明
2010/01/11 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
20岁生日感言
2014/01/13 职场文书
高三政治教学反思
2014/02/06 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
银行求职信
2014/05/31 职场文书
会议简报格式范文
2015/07/20 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
python 网络编程要点总结
2021/06/18 Python