<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>

    <script type="text/javascript" src="js/ajax.js"></script>

  </head>

  <body>

    <select id="provinceID" style="width:111px">

        <option>选择省份</option>

        <option>湖南</option>

        <option>广东</option>

    </select>

    &nbsp;&nbsp;&nbsp;

    <select id="cityID" style="width:111px">

        <option>选择城市</option>

    </select>    

    <script type="text/javascript">

        //定位省份下拉框，同时添加内容改变事件

        document.getElementById("provinceID").onchange = function(){

            //清空城市下拉框中的内容，除第一项外

            var cityElement = document.getElementById("cityID");

            cityElement.options.length = 1;

            //获取选中option标签的索引号，从0开始

            var index = this.selectedIndex;

            //定位选中的option标签

            var optionElement = this[index];

            //获取选中的option标签中的内容，即省份

            var province = optionElement.innerHTML;

            //如果选中的内容不是"选择省份"

            if("选择省份" != province){

                //NO1)

                var ajax = createAJAX();

                //NO2)

                var method = "POST";

                var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();

                ajax.open(method,url);

                //设置AJAX请求头

                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

                //NO3)

                var content = "province=" + province;

                ajax.send(content);

                //---------------------------------等待

                //NO4)

                ajax.onreadystatechange = function(){

                    if(ajax.readyState == 4){

                        if(ajax.status == 200){

                            //NO5)从AJAX异步对象中获取服务器响应的xml文档

                            var xmlDocument = ajax.responseXML;

                            //NO6)按照DOM规则，解析XML文档

                            var cityElementArray = xmlDocument.getElementsByTagName("city");

                            var size = cityElementArray.length;

                            for(var i=0;i<size;i++){

                                //innerHTML只能用在html/jsp中，不能用在xml中

                                var city = cityElementArray[i].firstChild.nodeValue;

                                //<option></option>

                                var optionElement = document.createElement("option");

                                //<option>广州</option>

                                optionElement.innerHTML = city;

                                //<select><option>广州</option></select>

                                cityElement.appendChild(optionElement);

                            }

                        }

                    }

                }

            }

        }

    </script>

  </body>

</html>
package loaderman.provincecity;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * 基于XML，以POST方式，完成省份-城市二级下拉联动

 * @author AdminTC

 */

public class ProvinceCityServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        String province = request.getParameter("province");

        //通知AJAX异步对象，服务器响应的数据为xml格式的

        response.setContentType("text/xml;charset=UTF-8");

        //获取字符输出流

        PrintWriter pw = response.getWriter();

        pw.write("<?xml version='1.0' encoding='UTF-8'?>");

        pw.write("<root>");

        if("广东".equals(province)){

            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("<city>岳阳</city>");

        }

        pw.write("</root>");

        pw.flush();

        pw.close();

    }

}

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. vue常用知识点

    vue中图片路径写法 <img :src="avatorSrc" alt=""> <img :src="avatorSrc2&quo ...

  2. web开发： css高级与盒模型

    一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...

  3. docker 搭建zookeeper集群和kafka集群

    docker 搭建zookeeper集群 安装docker-compose容器编排工具 Compose介绍 Docker Compose 是 Docker 官方编排(Orchestration)项目之 ...

  4. C# 之 .net core -- EF code first连接Mysql数据库

    一.在Models 新建两个数据库类 这个是数据库需要生成的类基础(塑造外观) public class User { [Key] public string ID { get; set; } [Ma ...

  5. CF1037H Security——SAM+线段树合并

    又是一道\(SAM\)维护\(endpos\)集合的题,我直接把CF700E的板子粘过来了QwQ 思路 如果我们有\([l,r]\)对应的\(SAM\),只需要在上面贪心就可以了.因为要求的是字典序比 ...

  6. 前端知识体系：JavaScript基础-原型和原型链-instanceof的底层实现原理

    instanceof的底层实现原理(参考文档) instanceof的实现实际上是调用JS的内部函数 [[HasInstance]] 来实现的,其实现原理是:只要右边变量的prototype在左边变量 ...

  7. 关于topN问题的几种解决方案

    在系统中,我们经常会遇到这样的需求:将大量(比如几十万.甚至上百万)的对象进行排序,然后只需要取出最Top的前N名作为排行榜的数据,这即是一个TopN算法.常见的解决方案有三种: (1)直接使用Lis ...

  8. Android: samil语法指令集-基于dex文件结构的寄存器虚拟机

    Smali文件结构解   Smali文件与java中的类是一一对应的,包括内部类和匿名内部类也会生成对应的smali文件(典型的比如实现某个接口的匿名内部类),所以你会看到.smali文件比.java ...

  9. 使用yum命令出错：SyntaxError: invalid syntax 由于用户取消而退出

    详见: https://blog.csdn.net/qq_24880013/article/details/90731617 必须修改的两个yum配置文件: 因为yum使用python2,因此替换为p ...

  10. CMake编译OpenCV

    使用CMake来编译OpenCV,以匹配自己使用的VS版本. 主要有两步: CMake编译OpenCV源码得到OpenCV.sln工程文件. VS编译OpenCV.sln. 以最新的cmake-3.1 ...