欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 21:17:50
本文实例为大家分享了使用xml数据载体实现城市省份二级联动的具体代码,供大家参考,具体内容如下 首先写好前台页面testprovince.jsp,将请求通过open、se...

本文实例为大家分享了使用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数据载体实现城市省份二级联动效果

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