1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.   <head>
  5.     <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>
  6.     <script type="text/javascript" src="js/ajax.js"></script>
  7.   </head>
  8.   <body>
  9.  
  10.     <select id="provinceID" style="width:111px">
  11.         <option>选择省份</option>
  12.         <option>湖南</option>
  13.         <option>广东</option>
  14.     </select>
  15.     &nbsp;&nbsp;&nbsp;
  16.     <select id="cityID" style="width:111px">
  17.         <option>选择城市</option>
  18.     </select>    
  19.  
  20.     <script type="text/javascript">
  21.         //定位省份下拉框，同时添加内容改变事件
  22.         document.getElementById("provinceID").onchange = function(){
  23.             //清空城市下拉框中的内容，除第一项外
  24.             var cityElement = document.getElementById("cityID");
  25.             cityElement.options.length = 1;
  26.             //获取选中option标签的索引号，从0开始
  27.             var index = this.selectedIndex;
  28.             //定位选中的option标签
  29.             var optionElement = this[index];
  30.             //获取选中的option标签中的内容，即省份
  31.             var province = optionElement.innerHTML;
  32.             //如果选中的内容不是"选择省份"
  33.             if("选择省份" != province){
  34.                 //NO1)
  35.                 var ajax = createAJAX();
  36.                 //NO2)
  37.                 var method = "POST";
  38.                 var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();
  39.                 ajax.open(method,url);
  40.                 //设置AJAX请求头
  41.                 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
  42.                 //NO3)
  43.                 var content = "province=" + province;
  44.                 ajax.send(content);
  45.  
  46.                 //---------------------------------等待
  47.  
  48.                 //NO4)
  49.                 ajax.onreadystatechange = function(){
  50.                     if(ajax.readyState == 4){
  51.                         if(ajax.status == 200){
  52.                             //NO5)从AJAX异步对象中获取服务器响应的xml文档
  53.                             var xmlDocument = ajax.responseXML;
  54.  
  55.                             //NO6)按照DOM规则，解析XML文档
  56.  
  57.                             var cityElementArray = xmlDocument.getElementsByTagName("city");
  58.                             var size = cityElementArray.length;
  59.                             for(var i=0;i<size;i++){
  60.                                 //innerHTML只能用在html/jsp中，不能用在xml中
  61.                                 var city = cityElementArray[i].firstChild.nodeValue;
  62.                                 //<option></option>
  63.                                 var optionElement = document.createElement("option");
  64.                                 //<option>广州</option>
  65.                                 optionElement.innerHTML = city;
  66.                                 //<select><option>广州</option></select>
  67.                                 cityElement.appendChild(optionElement);
  68.                             }
  69.                         }
  70.                     }
  71.                 }
  72.             }
  73.         }
  74.     </script>
  75.  
  76.   </body>
  77. </html>
  1. package loaderman.provincecity;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. /**
  12.  * 基于XML，以POST方式，完成省份-城市二级下拉联动
  13.  * @author AdminTC
  14.  */
  15. public class ProvinceCityServlet extends HttpServlet {
  16.     public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
  17.         request.setCharacterEncoding("UTF-8");
  18.         String province = request.getParameter("province");
  19.  
  20.         //通知AJAX异步对象，服务器响应的数据为xml格式的
  21.         response.setContentType("text/xml;charset=UTF-8");
  22.         //获取字符输出流
  23.         PrintWriter pw = response.getWriter();
  24.  
  25.         pw.write("<?xml version='1.0' encoding='UTF-8'?>");
  26.         pw.write("<root>");
  27.  
  28.         if("广东".equals(province)){
  29.             pw.write("<city>广州</city>");
  30.             pw.write("<city>深圳</city>");
  31.             pw.write("<city>中山</city>");
  32.         }else if("湖南".equals(province)){
  33.             pw.write("<city>长沙</city>");
  34.             pw.write("<city>株洲</city>");
  35.             pw.write("<city>湘潭</city>");
  36.             pw.write("<city>岳阳</city>");
  37.         }
  38.  
  39.         pw.write("</root>");
  40.         pw.flush();
  41.         pw.close();
  42.     }
  43. }

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动的更多相关文章

  1. AJAX二级下拉联动【XML方式】

    AJAX二级下拉联动案例 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市- 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的.这是怎么做到的呢? ...

  2. 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动

    下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...

  3. Spring中Bean的配置：基于XML文件的方式

    Bean的配置一共有两种方式:一种是基于XML文件的方式,另一种是基于注解的方式.本文主要介绍基于XML文件的方式 <bean id="helloWorld" class=& ...

  4. Spring Boot 框架下使用MyBatis访问数据库之基于XML配置的方式

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...

  5. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  6. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  7. AJAX多级下拉联动【JSON】

    前言 前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互.当时候我们的案例是二级联动,使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互,使用三级联动, ...

  8. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  9. Ajax案例-基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在

    08_register.jsp <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTY ...

随机推荐

  1. 【Struts2】Ognl与ValueStack

    一.OGNL 1.1 概述 1.2 OGNL 五大类功能 1.3 演示 二.ValueStack 2.1 概述 2.2 ValueStack结构 2.3 结论 2.3 一些问题 三.OGNL表达式常见 ...

  2. 各种web编辑器

    wangEditor,这是一个很轻量.简洁编辑器 UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysi ...

  3. Delphi 构造和析构

  4. 记一次引用maven插件报错解决方法

    1.报错信息如图: plugin org.springframework.boot:spring-boot-maven-plugin not found 2.解决方案: maven的配置文件[sett ...

  5. Tenka1 Programmer Contest 2019 D - Three Colors

    Three Colors 思路:dp 设sum为所有边的总和 不能组成三角形的情况:某条边长度>=ceil(sum/2),可以用dp求出这种情况的方案数,然后用总方案数减去就可以求出答案. 注意 ...

  6. Xadmin相关实现

    一,保存搜索条件(Save search conditions) kept conditions(保存条件)的应用场景比较常见,在我们查询时,可以实现多条件的筛选查询,比如:在淘宝上,选择了其中的一个 ...

  7. 数字签名 转载：http://www.youdzone.com/signature.html

    What is a Digital Signature?An introduction to Digital Signatures, by David Youd Bob (Bob's public k ...

  8. “景驰科技杯”2018年华南理工大学程序设计竞赛 A. 欧洲爆破（思维+期望+状压DP）

    题目链接:https://www.nowcoder.com/acm/contest/94/A 题意:在一个二维平面上有 n 个炸弹,每个炸弹有一个坐标和爆炸半径,引爆它之后在其半径范围内的炸弹也会爆炸 ...

  9. SpringBoot——》WebMvcConfigurerAdapter详解

    一.WebMvcConfigurerAdapter是什么二.WebMvcConfigurerAdapter常用的方法1.addInterceptors:拦截器2.addCorsMappings:跨域3 ...

  10. playbook 实例

    vim ~/.vimrc autocmd FileType yaml setlocal sw=2 ts=2 et ai 变量使用及错误处理 --- - hosts: db remote_user: r ...