AJAX二级下拉联动案例

我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市…

有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢？？？其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”，会根据省份来给出对应的城市信息。

我们这里就不读取数据库了，直接在Servlet写死数据来进行模拟测试。

分析

我们知道AJAX与服务器之间的交互常用的传输载体格式有三种：

  • HTML
  • XML
  • JSON

由于省份与城市是有层级关系的，因此我们只能用XML或者JSON。

我们这里首先就用XML来进行，后面会使用JSON，来看看他俩有什么不同的地方。。

前台分析

当用户选择了某个省份之后，就使用AJAX与服务器进行交互，那么在选择城市的时候就出现对应的城市信息。

  • 监听下拉框值变化事件
  • 只要下拉框值变化了，就与服务器进行交互
  • 得到服务器返回的值，解析XML
  • 使用DOM把数据写到城市下拉框列表中

后台分析

  • 得到前台带过来的数据
  • 判断该数据是什么，返回对应的的XML文件

写JSP页面



<%--

  Created by IntelliJ IDEA.

  User: ozc

  Date: 2017/5/17

  Time: 19:38

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>多级联动</title>

    <script type="text/javascript" src="js/ajax.js"></script>

</head>

<body>

<%--############前台页面###################--%>

<select name="province" id="provinceId">

    <option value="-1">请选择省份</option>

    <option>广东</option>

    <option>湖南</option>

</select>

<select name="city" id="cityId">

    <option>请选择城市</option>

</select>

<%--############AJAX###################--%>

<script type="text/javascript">

    document.getElementById("provinceId").onchange = function () {

        /**********定位到下拉框，获取下拉框的值***************/

        // 获取选中的下拉框索引值

        var index = this.selectedIndex;

        // 得到下拉框的值

        var province = this.options[index].innerHTML;

        //下拉框的值要是“请选择”，那么我们是不会访问服务器的

        if ("请选择省份" != province) {

            /********由于每次都会自动添加，因此每次在调用的时候清除***********/

            var citySelect = document.getElementById("cityId");

            //每次都将option变成长度只有1的

            citySelect.options.length = 1;

            /*************ajax代码*********************/

            //创建AJAX对象

            var ajax = createAJAX();

            //准备发送请求

            var method = "post";

            var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();

            ajax.open(method, url);

            //由于是POST方式，因此要设置头

            ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");

            ajax.send("province=" + province);

            /************ajax回调函数*********************/

            ajax.onreadystatechange = function () {

                if (ajax.readyState == 4) {

                    if (ajax.status == 200) {

                        //得到服务器端带过来的XML

                        var XMLDocument = ajax.responseXML;

                        /**********解析XML文档，使用DOM写到下拉框中****************/

                        var cities = XMLDocument.getElementsByTagName("city");

                        //得到每一个cities节点的值，动态生成下拉框，添加到下拉框中

                        for (var i = 0; i < cities.length; i++) {

                            var value = cities[i].firstChild.nodeValue;

                            //动态生成下拉框

                            var optionElement = document.createElement("option");

                            optionElement.innerHTML = value;

                            //添加到下拉框中

                            citySelect.appendChild(optionElement);

                        }

                    }

                }

            };

        }

    };

</script>

</body>

</html>

Servlet



import java.io.IOException;

import java.io.PrintWriter;

/**

 * Created by ozc on 2017/5/17.

 */

@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")

public class ProvinceServlet extends javax.servlet.http.HttpServlet {

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //设置中文编码

        request.setCharacterEncoding("UTF-8");

        String province = request.getParameter("province");

        //这里是返回的是XML，因此指定XML数据！

        response.setContentType("text/xml;charset=UTF-8");

        PrintWriter printWriter = response.getWriter();

        /****************返回XML文件给前台**************/

        printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");

        printWriter.write("<root>");

        if("广东".equals(province)){

            printWriter.write("<city>广州</city>");

            printWriter.write("<city>深圳</city>");

            printWriter.write("<city>中山</city>");

        }else if("湖南".equals(province)){

            printWriter.write("<city>长沙</city>");

            printWriter.write("<city>株洲</city>");

            printWriter.write("<city>湘潭</city>");

            printWriter.write("<city>岳阳</city>");

        }

        printWriter.write("</root>");

        System.out.println("1111");

        /*******事后操作*******/

        printWriter.flush();

        printWriter.close();

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        this.doPost(request, response);

    }

}

效果：

XML方式总结

  • 监听下拉框的变化，如果变化了，那么就使用异步操作去访问服务器，得到对应的数据返回给异步对象
  • 异步对象解析服务器带过来的数据，使用DOM编程把数据动态添加到页面上
    • 在Servlet上记得要指定返回的是XML的数据！
    • 在前台解析XML文档的时候，不能直接使用innerHtml来得到节点的值，只能通过firstChild.nodeValue的方式获取。
    • 由于每次append到下拉框都会连续append，因此在响应事件的时候，把下拉框清零
    • 把下拉框options的长度赋值为1，那么就是清零的操作了。

AJAX二级下拉联动【XML方式】的更多相关文章

  1. Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  2. AJAX多级下拉联动【JSON】

    前言 前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互.当时候我们的案例是二级联动,使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互,使用三级联动, ...

  3. 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动

    下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...

  4. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  5. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  6. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  7. 用NPOI导出Excel，生成下拉列表、以及下拉联动列表（第1篇/共3篇）

    最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...

  8. DBLookupCombobox实现下拉联动

    这次用DBLookupCombobox实现省份-城市-地区的下拉联动,用以学习DBLookupCombobox的一些用法 效果图: 首先建立数据表(数据表形式可以多种多样:数据库表.文本.xml等,最 ...

  9. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

随机推荐

  1. asp.net core 运用 Redis 配置步骤

    Redis可以用来存储session或直接存储键值对 首先要有asp.net core的项目,可以是webapi 或者MVC项目,还有有本地的Redis或者在远程服务器上,具体的安装就不讲述了 以下是 ...

  2. GoF设计模式 - 概述

    掌握编程语言仅仅意味着掌握了如何给计算机"下命令",而到底要计算机如何去做,怎么指挥,则是另一个问题--如何编程.设计模式是一套程序员的"武功套路",它教我们如 ...

  3. 【可视化】div背景半透明

    css实现元素半透明使用 opacity:0.x 实现背景色半透明:rgba(a,b,c,x); x为透明度0,到1

  4. Yii2 报错Getting unknown property: app\models\Product::

    解决方法:查看是否存在 "$a->$abc"的写法,应改成$a->abc

  5. spring的Java配置入门（Spring Boot学习笔记之一）

    spring的Java配置 1.创建maven项目 使用idea创建maven项目,这里顺便提一下,idea真的比eclipse好用,早点熟悉吧.然后就是maven是java项目管理最主流的工具,自己 ...

  6. HTTP协议初级入门

    Http = HyperText Transfer Protocol即超文本传输协议 HTTPS = Hyper Text Transfer Protocol over Secure Socket L ...

  7. STL(标准模板库) 中栈(stack)的使用方法

    STL 中栈的使用方法(stack) 基本操作: stack.push(x)  将x加入栈stack中,即入栈操作 stack.pop()  出栈操作(删除栈顶),只是出栈,没有返回值 stack.t ...

  8. 基于pytorch的CNN、LSTM神经网络模型调参小结

    (Demo) 这是最近两个月来的一个小总结,实现的demo已经上传github,里面包含了CNN.LSTM.BiLSTM.GRU以及CNN与LSTM.BiLSTM的结合还有多层多通道CNN.LSTM. ...

  9. python基础教程（五）

    字符串基本操作 所有标准的序列操作(索引.分片.乘法.判断成员资格.求长度.取最小值和最大值)对字符串同样适用,前面已经讲述的这些操作.但是,请注意字符串都是不可变的. 字符串的方法: 字符串从str ...

  10. [C]字符串排序之-冒泡法

    在oj刷题,遇见一题字符串排序题. 脑海里瞬间闪过数组排序. 思路有了,打开题解看看别人的思路,发现好多人的排序方法显得比较臃肿,可能也是我的水平不够,欣赏不来吧. 不过用冒泡法排序的时候一定要记得字 ...