AJAX二级下拉联动【XML方式】

太过爱你忘了你带给我的痛 2021-09-17 06:40 386阅读 0赞

# AJAX二级下拉联动案例 #

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

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

![这里写图片描述][SouthEast]

我们这里就不读取数据库了，直接**在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);
        }
    }

# 效果： #

![这里写图片描述][SouthEast 1]

# XML方式总结 #

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

[SouthEast]: /images/20210827/d152ade122a046b3a7e282dbb1f85910.png
[SouthEast 1]: /images/20210827/1698581186ef4cab8306b08702e3d1a9.png