收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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(); 
  } 
} 

运行结果如下:

查看图片

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

详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Webpack的CommonsChunkPlugin插件,负责将多次被使用的JS模块打包在一起。CommonsChunkPlugin能解决的问题在使用插件前,考虑几个问题:对哪些chunk进行提取,这

webpack中CommonsChunkPlugin详细教程(小结)
本文介绍了webpack中CommonsChunkPlugin详细教程(小结),分享给大家,也给自己留个笔记,具体如下:1.demo结构:2.package.json配置:{"name":"webpack-simple-demo","versi

微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写。1.getPhoneNumb

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号