省份-城市-区域三级联动【struts2 + ajax +非数据库版】

package loaderman;

/**
 * 实体，封装省份和城市
 */
public class Bean {
    private String province;//省份
    private String city;//城市
    public Bean(){}
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
}

package loaderman;

import java.util.List;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 后台控制器
 */
public class ProvinceCityAreaAction extends ActionSupport{
    //业务层
    private ProvinceCityAreaService provinceCityAreaService = new ProvinceCityAreaService();
    //Bean是实体，封装省份和城市
    private Bean bean;
    public Bean getBean() {
        return bean;
    }
    public void setBean(Bean bean) {
        this.bean = bean;
    }
    /**
     * 根据省份查询城市
     */
    public String findCityByProvince() throws Exception{
        System.out.println("查询城市进来了");
        cityList = provinceCityAreaService.findCityByProvince(bean.getProvince());
        //将List集合转成JSON文本
        return SUCCESS;
    }
    /**
     * 根据城市查询区域
     */
    public String findAreaByCity() throws Exception{
        System.out.println("查询区域进来了");
        areaList = provinceCityAreaService.findAreaByCity(bean.getCity());
        //将List集合转成JSON文本
        return SUCCESS;
    }

    private List<String> cityList;//需要转成JSON的集合，且为其设置值
    private List<String> areaList;//需要转成JSON的集合，且为其设置值

    public List<String> getCityList() {//插件会调用getXxx()方法来获取需要转成JSON的集合
        return cityList;
    }
    public List<String> getAreaList() {
        return areaList;
    }

}

package loaderman;

import java.util.ArrayList;
import java.util.List;

/**
 * 业务层

        */
public class ProvinceCityAreaService {
    /**
     * 根据省份查询城市
     */
    public List<String> findCityByProvince(String province) throws Exception{
        List<String> cityList = new ArrayList<String>();
        if("广东".equals(province)){
            cityList.add("广州");
            cityList.add("深圳");
            cityList.add("中山");
        }else if("湖南".equals(province)){
            cityList.add("长沙");
            cityList.add("株洲");
        }
        return cityList;
    }

    /**
     * 根据城市查询区域
     */
    public List<String> findAreaByCity(String city) throws Exception{
        List<String> areaList = new ArrayList<String>();
        if("广州".equals(city)){
            areaList.add("天河");
            areaList.add("白云");
        }else if("深圳".equals(city)){
            areaList.add("宝安");
            areaList.add("南山");
        }else if("中山".equals(city)){
            areaList.add("AA");
            areaList.add("BB");
        }else if("长沙".equals(city)){
            areaList.add("CC");
            areaList.add("DD");
        }else if("株洲".equals(city)){
            areaList.add("EE");
            areaList.add("FF");
        }
        return areaList;
    }
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

    <!--
        理论：struts2的插件包，就能将Action中的List转成JSON文本

        》导入struts2-json-plugin-2.3.1.1.jar包到/WEB-INF/lib目录下
        》自已的包继承json-default包，且json-default包继承struts-default包
          那么自已的包能用到json-default和struts-default这二个包中的功能
        》在Action中写一个getXxx()方法返回需要转成JSON字符串的对象
    -->

    <package name="mypackage" extends="json-default" namespace="/"> 

        <!-- 全局结果 -->
        <global-results>
            <result name="success" type="json"/>
        </global-results>

        <!-- 根据省份查询城市 -->
        <action
            name="findCityRequest"
            class="loaderman.ProvinceCityAreaAction"
            method="findCityByProvince">
        </action>

        <!-- 根据城市查询区域 -->
        <action
            name="findAreaRequest"
            class="loaderman.ProvinceCityAreaAction"
            method="findAreaByCity">
        </action>

    </package>

</struts>

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市-区域三级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <select id="province">
        <option>选择省份</option>
        <option>湖南</option>
        <option>广东</option>
    </select>

    <select id="city">
        <option>选择城市</option>
    </select>

    <select id="area">
        <option>选择区域</option>
    </select>

    <!-- 省份--城市 -->
    <script type="text/javascript">
        //定位"省份"下拉框，同时提交change事件
        $("#province").change(function(){
            //清空城市下拉框中的内容，除第一项外
            $("#city option:gt(0)").remove();
            //清空区域下拉框中的内容，除第一项外
            $("#area option:gt(0)").remove();
            //获取选中的省份
            var province = $("#province option:selected").text();
            //如果不是"选择省份"的话
            if("选择省份" != province){
                //异步发送请求到服务器
                //参数一：url表示请求的路径
                var url = "${pageContext.request.contextPath}/findCityRequest?time="+new Date().getTime();
                //参数二：sendData表示以JSON格式发送的数据
                var sendData = {
                    "bean.province" : province
                };
                //参数三：function(){}处理或回调函数
                $.post(url,sendData,function(backData,textStatus,ajax){
                    //测试
                    //alert( ajax.responseText );
                    //测试，backData是一个js对象，cityList是属性
                    var array = backData.cityList;
                    //数组的长度
                    var size = array.length;
                    //迭代数组
                    for(var i=0;i<size;i++){
                        //获取数组中的每个元素
                        var city = array[i];
                        //创建option元素
                        var $option = $("<option>"+city+"</option>");
                        //将option元素添加到城市下拉框中
                        $("#city").append( $option );
                    }
                });
            }
        });
    </script>

    <!-- 城市--区域 -->
    <script type="text/javascript">
        //定位"城市"下拉框，同时提交change事件
        $("#city").change(function(){
            //清空区域下拉框中的内容，除第一项外
            $("#area option:gt(0)").remove();
            //获取选中的城市
            var city = $("#city option:selected").text();
            //如果不是"选择省份"的话
            if("选择城市" != city){
                //异步发送请求到服务器
                //参数一：url表示请求的路径
                var url = "${pageContext.request.contextPath}/findAreaRequest?time="+new Date().getTime();
                //参数二：sendData表示以JSON格式发送的数据
                var sendData = {
                    "bean.city" : city
                };
                //参数三：function(){}处理或回调函数
                $.post(url,sendData,function(backData,textStatus,ajax){
                    //测试
                    //alert( ajax.responseText );
                    //测试，backData是一个js对象，cityList是属性
                    var array = backData.areaList;
                    //数组的长度
                    var size = array.length;
                    //迭代数组
                    for(var i=0;i<size;i++){
                        //获取数组中的每个元素
                        var area = array[i];
                        //创建option元素
                        var $option = $("<option>"+area+"</option>");
                        //将option元素添加到区域下拉框中
                        $("#area").append( $option );
                    }
                });
            }
        });
    </script>

  </body>
</html>