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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
JavaScript 的继承
Oct 01 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
js实现上传图片预览方法
Oct 25 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
express 项目分层实践详解
Dec 10 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
react中hook介绍以及使用教程
Dec 11 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+mysql一个名片库程序
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
高中语文教学反思
2014/01/16 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
检讨书范文
2015/01/27 职场文书
三孔导游词
2015/02/05 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android