学习aiax(javascript)--省份-城市二级下拉联动(POST方式)

1.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省份-城市二级下拉联动(POST方式)</title>
<script type="text/javascript">
    function createAJAX() {
        var ajax = null;
        try {
            ajax = new ActiveXObject("microsoft.xmlhttp");
            //alert("你的浏览器支持ajax,是IE");
        } catch (e1) {
            ajax = new XMLHttpRequest();
            //alert("你的浏览器支持ajax,是非IE");
        }
        return ajax;
    }
</script>
</head>
<body>
    <select id="province">
        <option>选择省份</option>
        <option>江苏省</option>
        <option>陕西省</option>
    </select> &nbsp;&nbsp;&nbsp;
    <select id="city">
        <option>选择城市</option>
    </select>
</body>

<script type="text/javascript">
    window.document.getElementById("province").onchange = function() {
        //清除城市下拉框中的内容除第一项外
        var citySelectElement = document.getElementById("city");
        citySelectElement.options.length = 1;
        //获取选中的省份
        //获取选中option标签的索引号,从0开始
        var i = this.selectedIndex;
        //定位选中的option标签
        var optionElement = this[i];
        //获取选中的option标签中的内容,即省份
        var province = optionElement.innerHTML;
        //如果选中的内容不是"选择省份"
        if ("选择省份" != province) {
            //1.创建一部对象
            var ajax = createAJAX();
            //2.异步对象准备发送请求
            var method = "post";
            var url = "${pageContext.request.contextPath}/ProvinceCityAjaxServlet?time= "
                    + new Date().getTime();
            ajax.open(method, url);
            //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
            ajax.setRequestHeader("content-type",
                    "application/x-www-form-urlencoded");
            //3.AJAX异步对象真正发送请求体的数据到服务器,如果请求体无数据的话,用null表示,如果有值,用键值对
            var content = "province=" + province;
            ajax.send(content);
            //---------------------------------等待-------------------------
            //4. AJAX异步对象不断监听服务端状态的变化,只有状态码变化了,方可触发函数
            //0-1-2-3-4,这些是可以触发函数的
            //4-4-4-4-4,这些是不可以触发函数的
            //以下这个函数是服务器来触发的,不是程序员触发的,这和onclick是不一样的
            //4.
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4) {
                    if (ajax.status == 200) {
                        //5.从AJAX异步对象中获取服务器响应的xml文档
                        var xmlDocument = ajax.responseXML;
                        //6. 按照dom规则,解析xml文件中的所有内容
                        var cityElementArray = xmlDocument
                                .getElementsByTagName("city");
                        var size = cityElementArray.length;
                        for (var i = 0; i < size; i++) {
                            var cityElement = cityElementArray[i];
                            //innerHTML只能用于html和jsp页面,不能用于xml页面
                            //在xml页面我们通常用firstChild.nodeValue去替代innerHTML
                            var city = cityElement.firstChild.nodeValue;
                            //<option></option>
                            var optionElement = document
                                    .createElement("option")
                            //<option>南京市</option>
                            optionElement.innerHTML = city;
                            //<select><option>南京市</option></select>
                            citySelectElement.appendChild(optionElement)
                        }
                    }
                }
            }
        }

    }
</script>
</html>

2.servlet代码

package com.buaa.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ProvinceCityAjaxServlet")
public class ProvinceCityAjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/xml;charset=UTF-8");
            String province = request.getParameter("province");
            System.out.println(province);
            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>");
                pw.write("<city>南通市</city>");
            }else if("陕西省".equals(province)){
                pw.write("<city>西安市</city>");
                pw.write("<city>咸阳市</city>");
                pw.write("<city>渭南市</city>");
            }
            pw.write("</root>");
            pw.flush();
            pw.close();

    }

}

注意:xml文档的接收方式

时间: 2024-10-14 08:23:02

学习aiax(javascript)--省份-城市二级下拉联动(POST方式)的相关文章

收藏的js实现全国省份城市级联下拉菜单

在写程序的时候,经常需要用到全国省份城市级联下拉菜单的js代码. 这样的程序,没有必要完全自己去写,太费时间. 下面是我收藏的一个优质代码,非常不错,分享给大家. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

Javascript实现简单的下拉二级菜单

在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

2016-07-05 JavaScript实现省份城市二级联动

简介:利用JavaScript实现省份城市二级联动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta charset="UTF-8"><title>New Document </title><script language="JavaScript" type=&

ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动

今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新]的[异步]通讯技术, 说白了就是局部刷新. 二.ajax的原理如下图 附上ajax与服务器之间的几种状态,但 4是所有浏览器都支持的的 三.ajax包含的技术如下图 四.ajax开发步骤 步一:创建ajax对象,例如:ajax = createAjax(); 步二:开启异步对象:例如:ajax.o

Web前端开发实战3:二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现 的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素. 2)通过使用children()方法寻找子元素. 3)通过使用show()方法来显示HTML元素. 4)通过使用hide()方法来隐藏HTML元素. 5)jQuery库引用方法: 第一种方法:将jQuery库下载到电脑上

如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <meta charset="UTF-8"> <title>Documen

php 二级下拉框

1,以省.市为例子,二级下拉框,先赋上页面,html部分如下: <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">城市</label> <div class="col-sm-10"> <select name="province" class=

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

Web前端开发实战2:二级下拉式菜单之JS实现

上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏.使用 JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单show