<%@ 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. Go语言根据数据表自动生成model以及controller代码

    手写model的用法请参考: https://www.jianshu.com/p/f5784b8c00d0 这里仅说明自动生成model文件的过程 bee generate appcode -tabl ...

  2. Win7系统不能拖动文件夹的问题怎么解决？

    一般情况下,如果我们想要在电脑中移动文件夹,可以采用剪切复制粘贴或者按住鼠标左键拖动的方式来实现,但有些Win7系统用户反映文件夹会出现不能移动的情况,这是怎么回事呢?下面好系统U盘启动就为大家介绍一 ...

  3. web开发：jquery之DOM

    一.文档结构 二.文档操作 三.文档操作案例 四.form表单 五.正则 六.form案例 一.文档结构 ```jsvar $sup = $('.sup');console.log($sup.chil ...

  4. 小白老凯，初出茅庐！请多关照！简单分享一些 mysql 数据库的安装操作！请给为大神雅正！

    在我们写代码,存储数据时常常会用到各种数据库,如:mysql.access.sql.server.Oracle等等,在这里就说一下mysql数据库的的操作指令! 首先我们了解下如何安装mysql数据库 ...

  5. 解读Position

    首先Position在字面讲是位置的意思,在HTML中是定位的意思,它有四种属性:分别是static是静态的,也是默认的效果,没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. ...

  6. jQuery.trim()方法

    定义和用法 $.trim() 函数用于去除字符串两端的空白字符. 注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符.如果这些空白字符在字符串中间时,它们将 ...

  7. linux 没有界面内容显示不全解决办法

    1.管道 管道简单理解就是,使用管道意味着第一个命令的输出会作为第二个命令的输入,第二个命令的输出又会作为第三个命令的输入,依此类推.利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的 ...

  8. CentOS 6 自定义单实例 二进制方式 安装mariadb-5.5.59

    系统平台: CentOS release 6.9 (Final) 内核 2.6.32-696.el6.x86_64 1.去官网下载适合的二进制包 http://mariadb.org/ mariadb ...

  9. Hive的JDBC连接

    首相要安装好hive 1.首先修改配置文件文件为hive 路径下的  conf/hive-sit.xml 将内容增加 <property> <name>hive.server2 ...

  10. Nginx的TCP/UDP调度器

    安装nginx [root@proxy ~]# yum –y install gcc pcre-devel openssl-devel //安装依赖包 [root@proxy ~]# .tar.gz ...