AJAX多级下拉联动【JSON】

布满荆棘的人生 2021-09-17 06:42 413阅读 0赞

# 前言 #

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

这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制….

*  **省份-城市-区域三级联动【Struts2 + JSON版】**

--------------------

# 分析 #

与上次是一样的，只不过这次换了用JSON，使用Action控制罢了…

**监听下拉框的变动，使用异步对象与服务器进行交互。**

## 前台分析 ##

*  **监听下拉框的变动**
 *  **得到服务器返回的JSON数据**
 *  **使用eval()进行解析，得到具体的对象**
 *  **使用DOM编程把数据填充到对应的下拉框上**

## 后台分析 ##

*  **得到前台发送过来的数据**
 *  **判断具体的数据是什么，给出对应的数据**
 *  **使用Struts2提供的组件把数据封装成JSON**
 *  **返回给浏览器**

--------------------

## 监听省份JSP页面 ##

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates. --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>使用JSON数据载体与服务器进行交互</title>
    
          <script type="text/javascript" src="js/ajax.js"></script>
      </head>
      <body>
    
    
      <%--############前台页面##############################--%>
      <select name="province" id="provinceId">
        <option>请选择省份</option>
        <option>广东</option>
        <option>北京</option>
      </select>
    
      <select name="city" id="cityId">
        <option>请选择城市</option>
      </select>
    
    
      <select name="area" id="areaId">
        <option>请选择区域</option>
      </select>
    
      <%--############监听省份##############################--%>
      <script type="text/javascript"> document.getElementById("provinceId").onchange= function () { // 得到选中的下拉框的值 var provinceValue = this.options[this.selectedIndex].innerHTML; /***************ajax代码*************************/ if("请选择省份" != provinceValue) { //每次访问的时候，都要清空select的值 var citySelect = document.getElementById("cityId"); citySelect.options.length = 1; var ajax = createAJAX(); var method = "post"; var url = "${pageContext.request.contextPath}/province_findCityByProvince?time=" + new Date().getTime(); ajax.open(method, url); ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //顾及到发送的key、value值有很多，于是我们使用对象吧。 ajax.send("bean.name=" + provinceValue); /***************等待服务器的响应，得到服务器返回的数据************************/ ajax.onreadystatechange = function () { if(ajax.readyState==4) { if(ajax.status==200) { var jsonJava = ajax.responseText; //解析成是JS类型的JSON var json = eval("(" + jsonJava + ")"); //得到每个城市的值 for(var i=0;i<json.city.length;i++) { var city = json.city[i]; //动态创建option控件 var option = document.createElement("option"); option.innerHTML = city; citySelect.appendChild(option); } } } }; } }; </script>
    
      </body>
    </html>

## 监听省份Action ##

**要想Struts2能够把Action的数据封装成JSON，就需要导入Struts2的开发包**

*  **struts2-json-plugin-2.3.4.1.jar**

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

**在Action中对应的成员属性需要给getter方法**

import com.opensymphony.xwork2.ActionSupport;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** * Created by ozc on 2017/5/18. */
    public class ProvinceAction extends ActionSupport{ 
    
        //自动封装数据
        private Bean bean;
        public Bean getBean() {
            return bean;
        }
        public void setBean(Bean bean) {
            this.bean = bean;
        }
    
        //封装城市的集合
        private List<String> city = new ArrayList<>();
        public List<String> getCity() {
            return city;
        }
    
        public String findCityByProvince() throws Exception {
    
            if ("广东".equals(bean.getName())) {
                city.add("广州");
                city.add("珠海");
                city.add("从化");
            } else if ("北京".equals(bean.getName())) {
                city.add("一环");
                city.add("二环");
                city.add("三环");
                city.add("四环");
    
            } else {
                System.out.println("没有你选择的地区");
    
            }
            return "ok";
        }
    }

**返回给前端的时候，数据是这样子的：**

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

--------------------

## 效果 ##

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

--------------------

## 监听城市JSP ##

<%--############监听城市##############################--%>
    
      <script type="text/javascript"> document.getElementById("cityId").onchange = function () { //清空值 var areaSelect = document.getElementById("areaId"); areaSelect.options.length = 1; //得到选择选中的下拉框的值 var cityValue = this.options[this.selectedIndex].innerHTML; if(cityValue!="请选择城市"){ var ajax = createAJAX(); var method = "post"; var url = "${pageContext.request.contextPath}/province_findAreaByCity?time=" + new Date().getTime(); ajax.open(method, url); ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //顾及到发送的key、value值有很多，于是我们使用对象吧。 ajax.send("bean.name=" + cityValue); /***************等待服务器的响应，得到服务器返回的数据************************/ ajax.onreadystatechange = function () { if(ajax.readyState==4) { if(ajax.status==200) { var jsonJava = ajax.responseText; var json = eval("(" + jsonJava + ")"); //得到每个地区的值 for(var i=0;i<json.area.length;i++) { var area = json.area[i]; //动态创建option控件 var option = document.createElement("option"); option.innerHTML = area; areaSelect.appendChild(option); } } } } }; }; </script>

## Action页面 ##

public String findAreaByCity() throws Exception {
    
            if ("广州".equals(bean.getName())) {
                area.add("白云区");
                area.add("黄浦区");
                area.add("萝岗区");
            } else if ("珠海".equals(bean.getName())) {
                area.add("香江");
                area.add("拱北");
                area.add("EE");
                area.add("xx");
            } else {
                System.out.println("没有你选择的地区");
    
            }
            return "ok";
        }

# 最终效果： #

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

# 总结 #

这次使用的是JSON作为数据载体与服务器进行交互，和XML本质上是没有区别的。

**只不过JSON是更加轻量级文本数据，在JavaScript能够方便地获取返回的数据**

*  **在Struts2中把Action数据封装成JSON格式，返回给异步对象**  
    
    
     *  **需要导入jar包**
     *  **在配置文件中配置继承json包**
     *  **返回的类型是json**
 *  **如果使用POST时，发送的key、vaulue太多的话，我们可以使用bean进行封装**
 *  **当选中省份时，把城市和区域的下拉框清空，当选择城市时，把区域的下拉框清空**

--------------------

[SouthEast]: /images/20210827/e305ed9ad829400bab2117daae6dde08.png
[SouthEast 1]: /images/20210827/61d509f838c14cc18c73c9912211d248.png
[SouthEast 2]: /images/20210827/e548bb325adb4bb281258ba233a546bb.png
[SouthEast 3]: /images/20210827/11e22a4ce7c44e759410ae619694add6.png