<%@ 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. 30K以上的高薪Java程序员所需技能大汇总

    总所周知,Java是目前使用最为广泛的网络编程语言之一. 它具有简单,面向对象,稳定,与平台无关,解释型,多线程,动态等特点. 一般的JAVA程序员或许只需知道一些JAVA的语法结构就可以应付了.但要 ...

  2. 【Git】一、安装、配置和仓库创建

    之前一直使用图形界面的git,只会一些最常用的操作,并没有说深入学习git的全部功能 开发这么久了,觉得是时候学习一下指令操作,更快捷也更bigger ------------------------ ...

  3. Win10系统升级更新方式将会更智能

    使用Win10系统的你肯定遇到过在工作时开始自动更新而不得不搁置工作的情况,想必你也已经被Win10系统的自动更新折磨不已,不过这种情况将会马上得到改观. 微软现在已经开始寻找更智能的版本升级更新方式 ...

  4. 团队第三次作业：Alpha版本第二周小结

    姓名 学号 周前计划安排 每周实际工作记录 自我打分 XXX 061109 1.对原型设计与编码任务进行进一步的规划与任务分配 2.协调与统一已完成的部分原型设计页面风格并针对部分页面提出了改进建议 ...

  5. 拆机联想ideapad s500

    这是我第一次拆机,中间也是经历了各种艰难险阻,最后还算是成功.首先,说一下拆机得目的:很简单,为了加一个内存条:下面具体说拆机得步骤: 第一步,在网上查攻略,刚开始的时候,并没有很详细的具体到机型,只 ...

  6. axios 用 params/data 发送参数给 springboot controller，如何才能正确获取

    今天有人遇到接口调用不通的情况,粗略看了一下是axios跨域请求引起了.找到问题,处理就简单多了. 但是我看其代码,发现比较有意思 export function agentlist(query) { ...

  7. shell实现并发控制

    需求:并发检测1000台web服务器状态(或者并发为1000台web服务器分发文件等)如何用shell实现?                                              ...

  8. echarts自定义折线图横坐标时间间隔踩坑总结

    折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...

  9. Navicat创建数据库或导入数据库

    双击点亮数据库 导入数据库 点击开始

  10. Java进阶知识14 Struts2中的S标签

    1.A 开头 <s:a href=""></s:a> //超链接,类似于html里的<a></a> <s:action nam ...