AJAX多级下拉联动【JSON】

前言

前面我们已经使用过了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

这里写图片描述

在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";
    }
}

返回给前端的时候,数据是这样子的:

这里写图片描述


效果

这里写图片描述


监听城市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";
    }

最终效果:

这里写图片描述

总结

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

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

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

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
### 回答1: 好的,我可以为您提供相关的代码实现。 这是一个基于 jQuery 的三级联动下拉菜单的例子: HTML 代码: ``` <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择地区</option> </select> ``` jQuery 代码: ``` $(document).ready(function(){ // 加载省份数据 $.ajax({ type: "GET", url: "省份数据接口地址", dataType: "json", success: function(data){ $.each(data,function(i,item){ $("#province").append("<option value='"+item.code+"'>"+item.name+"</option>"); }); } }); // 当省份选择发生变化时,加载城市数据 $("#province").change(function(){ var provinceCode = $(this).val(); if(provinceCode != ""){ $.ajax({ type: "GET", url: "城市数据接口地址", data: {"provinceCode":provinceCode}, dataType: "json", success: function(data){ $("#city").empty(); $("#area").empty(); $("#city").append("<option value=''>请选择城市</option>"); $.each(data,function(i,item){ $("#city").append("<option value='"+item.code+"'>"+item.name+"</option>"); }); } }); }else{ $("#city").empty(); $("#area").empty(); $("#city").append("<option value=''>请选择城市</option>"); $("#area").append("<option value=''>请选择地区</option>"); } }); // 当城市选择发生变化时,加载地区数据 $("#city").change(function(){ var cityCode = $(this).val(); if(cityCode != ""){ $.ajax({ type: "GET", url: "地区数据接口地址", data: {"cityCode":cityCode}, dataType: "json", success: function(data){ $("#area").empty(); $("#area").append("<option value=''>请选择地区</option>"); $.each(data,function(i,item){ $("#area").append("<option value='"+item.code+"'>"+item.name+"</option>"); }); } }); }else{ $("#area").empty(); $("#area").append("<option value=''>请选择地区</option>"); } }); }); ``` 请注意,以上代码中的数据接口地址需要替换为实际的接口地址。此外,还需要根据实际情况调整代码中的数据格式和名称。 ### 回答2: Ajax多级联动效果是指利用Ajax技术实现多个下拉菜单之间的数据联动,实现根据前一个下拉菜单的选项动态改变后续下拉菜单的选项内容。Ajax三级联动下拉菜单效果是指有三个相关联的下拉菜单,选择一个下拉菜单的选项后,另外两个下拉菜单的选项内容会相应改变。 实现这个效果的步骤如下: 1. 前端页面设置三个下拉菜单元素,并使用JavaScript监听第一个下拉菜单的选项改变事件,即当第一个下拉菜单的选项改变时触发事件。 2. 在JavaScript中定义一个Ajax请求函数,该函数通过发送一个Ajax请求到后端获取第二个下拉菜单的选项内容。 3. 后端接收到Ajax请求后,根据第一个下拉菜单选项的值进行相应的数据处理,并将处理结果返回给前端。 4. 前端通过Ajax请求的回调函数获取到后端返回的数据,然后将数据设置为第二个下拉菜单的选项内容。 5. 同样地,对第二个下拉菜单也需要设置一个监听选项改变事件的函数,并在该函数中通过发送Ajax请求获取第三个下拉菜单的选项内容。 6. 后端根据第二个下拉菜单选项的值进行数据处理,并返回给前端。 7. 前端通过回调函数获取到后端返回的数据,并将数据设置为第三个下拉菜单的选项内容。 通过以上步骤,就可以实现Ajax三级联动下拉菜单效果。在这个过程中,通过Ajax技术实现了前后端的数据交互,从而实现了多级联动效果。 ### 回答3: Ajax多级联动效果指的是在网页中使用Ajax技术实现多个下拉菜单之间的联动效果。常见的应用场景是省市区三级联动选择。 具体操作如下: 1. 在HTML中,定义一个最外层的下拉菜单,用来选择省份。 2. 使用Ajax发送请求,获取省份列表数据,并将数据填充到省份的下拉菜单中。 3. 给省份下拉菜单添加change事件监听器,当省份变化时,触发事件回调函数。 4. 在事件回调函数中,获取选中的省份值,并发送Ajax请求获取对应的城市列表数据。 5. 将获取到的城市列表数据填充到城市的下拉菜单中。 6. 给城市下拉菜单添加change事件监听器,当城市变化时,触发事件回调函数。 7. 在事件回调函数中,获取选中的城市值,并发送Ajax请求获取对应的区县列表数据。 8. 将获取到的区县列表数据填充到区县的下拉菜单中。 9. 完成三级联动菜单的效果。 通过以上步骤,实现了Ajax三级联动下拉菜单效果,用户可以根据选择的省市区,动态获取到对应的下级菜单数据,从而实现多级联动效果。此种效果在选择地址、商品分类等场景中应用广泛。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值