tags: AJAX

前言

前面我们已经使用过了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" %>      使用JSON数据载体与服务器进行交互            <%--############前台页面##############################--%>        <%--############监听省份##############################--%>    复制代码

监听省份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
    
      city = new ArrayList<>();    public List
     
       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

<%--############监听城市##############################--%>  复制代码

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进行封装

当选中省份时，把城市和区域的下拉框清空，当选择城市时，把区域的下拉框清空

如果您觉得这篇文章帮助到了您，可以给作者一点鼓励