<%@ 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. 【Struts2】简介及入门

    一.概述 二.Struts2 快速入门程序 2.1 开发流程比较 2.2 引入依赖 2.2 创建jsp页面 2.3 在web.xml中配置前端控制器 2.4 创建struts.xml配置文件 2.4 ...

  2. 【Distributed】限流技巧

    一.概述 1.1 高并发服务限流特技 1.2 为什么要互联网项目要限流 1.3 高并发限流解决方案 二.限流算法 2.1 计数器 2.2 滑动窗口计数 2.3 令牌桶算法 使用RateLimiter实 ...

  3. Spark中资源与任务的关系

    在介绍Spark中的任务和资源之前先解释几个名词: Dirver Program:运行Application的main函数(用户提交的jar包中的main函数)并新建SparkContext实例的程序 ...

  4. eclipse创建Maven Web项目以及无法修改Project Facets

    1.在eclipse中创建maven项目,在菜单栏的:File-->New-->other中,搜索maven则会出现Maven Project; 2.点击next继续; 3.点击next继 ...

  5. db2 with用法

    最近在研究db2 递归查询时想到了with,一直以为with只是用来查询递归,但是实际with功能强大,还有更加强大的功能,偶然读到一位大神的文章,对with做了很详细的解读,特贴出来供大家学习研究 ...

  6. PXC集群信息查询

    目录 PXC集群信息查询 pxc流量控制 PXC节点状态 PXC集群状态 节点与集群的相关信息 PXC集群事务相关信息 PXC集群信息查询 show status like "%wsrep% ...

  7. GOLANG接口编程的最佳实践一 （sort.Sort(data Interface ) ）

    package main import( "fmt" "sort" "math/rand" ) //定义一个武当派的结构体 type Wud ...

  8. vscode 右键打开

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode] @="Open with Code" ...

  9. mysql锁定单个表的方法

    mysql锁定单个表的方法mysql>lock table userstat read;mysql>unlock tables; 本文来自ChinaUnix博客,如果查看原文请点:http ...

  10. JavaScript属性名和属性值

    ㈠属性名 var obj = new Object(); 向对象中添加属性 ⑴属性名:           - 对象的属性名不强制要求遵守标识符的规范                 什么乱七八糟的名 ...