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

 更新时间:2021年08月24日 16:30:56   作者:evan_qb  
这篇文章主要为大家详细介绍了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实现交互式博客

    基于JavaScript实现交互式博客

    在Web开发中,JavaScript(JS)是一种至关重要的编程语言,它使网页具有交互性,本文主要介绍了如何使用JavaScript实现一个交互式博客,需要的可以了解下
    2024-01-01
  • 如何使用Javascript获取距今n天前的日期

    如何使用Javascript获取距今n天前的日期

    本篇文章是对使用Javascript获取距今n天前日期的实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • 与iframe进行跨域交互的解决方案(推荐)

    与iframe进行跨域交互的解决方案(推荐)

    这篇文章主要介绍了与iframe进行跨域交互的解决方案,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 浅谈JavaScript 中的延迟加载属性模式

    浅谈JavaScript 中的延迟加载属性模式

    改善性能的最好方法之一是避免重复两次相同的工作。因此,只要可以缓存结果供以后使用,就可以加快程序的速度。延迟加载属性模式技术使任何属性都可以成为缓存层以提高性能。这里说到的延迟加载属性模式就是利用的访问器属性,将计算昂贵的操作推迟到需要时再使用
    2021-06-06
  • 原生JS实现鼠标滑动撒爱心特效

    原生JS实现鼠标滑动撒爱心特效

    这篇文章主要为大家详细介绍了原生JS实现鼠标滑动撒爱心特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 浅谈利用JavaScript进行的DDoS攻击原理与防御

    浅谈利用JavaScript进行的DDoS攻击原理与防御

    这篇文章主要介绍了浅谈利用JavaScript进行的DDoS攻击原理与防御,以及介绍了相关的中间人攻击原理,需要的朋友可以参考下
    2015-06-06
  • 第四章之BootStrap表单与图片

    第四章之BootStrap表单与图片

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍Bootstrap表单与图片的相关资料,需要的朋友可以参考下
    2016-04-04
  • JavaScript Math.round() 方法

    JavaScript Math.round() 方法

    math.round()方法将对参数进行四舍五入操作,对js math.round相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • js实现日期级联效果

    js实现日期级联效果

    本篇文章主要是对js实现日期级联效果的实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript中强制执行toString()具体实现

    javascript中强制执行toString()具体实现

    Javascript通常会根据方法或运算符的需要而自动把值转成所需的类型,这可能导致各种错误,接下来为大家介绍下javascript如何强制执行toString(),感兴趣的朋友可以参考下哈
    2013-04-04

最新评论