<%@ 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. 一周死磕fastreport ----ASP.NET （二）

    前一章忘了为什么要死磕fastreport  了,这次简单说一下,  公司本来有一个winfrom  窗体打印程序,可是上司觉得太麻烦了,(前几天 我一直在做web版看板,然后发现还不错,于是 想把公 ...

  2. Centos7 docker、harbor 安装配置

    Docker 安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.cloud.tencent.com/repo/epel-7.repo wget ...

  3. Oralce问题之ORA-12560:TNS协议适配器错误

    在Windows系统中,通过CMD命令打开命令窗口,通过命令:sqlplus / as sysdba回车后提示 协议适配器错误 可能原因: (1).Oralce数据库监听服务没启动起来 通过开始-&g ...

  4. H2数据库启动提示8082端口被占用

    The Web Console server could not be started. Possible cause: another server is already running at ht ...

  5. 【CF1218E】Product Tuples

    题目大意:给定一个长度为 \(N\) 的序列,求从序列中选出 \(K\) 个数的集合乘积之和是多少. 题解: 由于是选出 \(K\) 个数字组成的集合,可知对于要计算的 \(K\) 元组来说是没有标号 ...

  6. 关于github报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository.

    今天上午写demo的时候,突然pull不下代码了,报了一下这样情况的错误: 看了一下代码,怀疑是网路错误,因为在这以前一切都正常的,然后将代码复制搜索了一番,解决办法有很多什么配置config啦,gi ...

  7. 利用 canvas 实现压缩图片

    /** * nase64Data --> 要压缩的图片base64数据 * width --> 宽度 * height --> 高度 * _callback --> 回调函数 ...

  8. CSS实现按钮YES-NO按钮+Jquery获取按钮状态。

    前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识.说实话,一个做后端我是懵逼状态的. 不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下: ...

  9. 如何在 Google 地图中添加标记和说明

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  10. MFC 画笔CPen、画刷CBrush

    新建单个文档的MFC应用程序,类视图——View项的属性——消息,WM_PAINT,创建OnPaint()函数 dc默认有一个画笔(实心1像素宽黑线). CPen画笔非实心线像素宽必须为1,否则膨胀接 ...