Json实例：省市区三级联动（json+sturts2）

1）JS代码

<script type="text/javascript">
  document.getElementById("provinceID").onchange = function(){
    var province = this[this.selectedIndex].innerHTML;
    //清除城市
    var cityElement = document.getElementById("cityID");
    cityElement.options.length=1;
    //清除区域
    var areaElement = document.getElementById("areaID");
    areaElement.options.length=1;
    if("请选择省份" != province){
     var ajax = createAjax();
     var method = "POST";
     var url = "${pageContext.request.contextPath}/PCA_getCityByProvince?time="+new Date().getTime();
     ajax.open(method,url);
     ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
     var content = "bean.province="+province;
     ajax.send(content);
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++===
     ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
       if(ajax.status == 200){
        //json的接收方式是ajax.responseText
        var cityJAVA = ajax.responseText;
        //把接收到的数据从Java格式转成js格式
        var cityJS = eval("("+cityJAVA+")");
        var array = cityJS.citys;
        var len = array.length;
        for(var i=0;i<len;i++){
         var city = array[i];
         var optionElement = document.createElement("option");
         optionElement.innerHTML=city;
         cityElement.appendChild(optionElement);
        }
       }
      }
     };
    }
   };
   document.getElementById("cityID").onchange = function(){
    var city = this[this.selectedIndex].innerHTML;
    var areaElement = document.getElementById("areaID");
    areaElement.options.length=1;
    if("请选择城市" != city){
     var ajax = createAjax();
     var method = "POST";
     var url = "${pageContext.request.contextPath}/PCA_getAreaByCity?time="+new Date().getTime();
     ajax.open(method,url);
     ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
     var content = "bean.city="+city;
     ajax.send(content);
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++===
     ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
       if(ajax.status == 200){
        var areaJAVA = ajax.responseText;
        var areaJS = eval("("+areaJAVA+")");
        var array = areaJS.areas;
        var len = array.length;
        for(var i=0;i<len;i++){
         var area = array[i];
         var optionElement = document.createElement("option");
         optionElement.innerHTML=area;
         areaElement.appendChild(optionElement);
        }
       }
      }
     };
    }
   };
  </script>

2）Action代码

public class ProvinceCityAreaAction extends ActionSupport{
 private ProvinceCityAreaDao dao = new ProvinceCityAreaDao();
 //Bean对象封装着province和city两个属性，用于方便接收ajax传送的数据
 private Bean bean;
 public Bean getBean() {
  return bean;
 }
 public void setBean(Bean bean) {
  this.bean = bean;
 }
 //获取全部省份
 public String getAllProvince(){
  List<Province> provinces = dao.getAllProvince();
  ActionContext.getContext().getContextMap().put("provinces",provinces);
  return "main";
 }
 //根据省份获取城市
 public String getCityByProvince(){
  List<City> cityList = dao.getCityByProCode(bean.getProvince());
  citys = new ArrayList<String>();
  for(int i=0;i<cityList.size();i++){
   City city = cityList.get(i);
   citys.add(city.getName());
  }
 
  return SUCCESS;
 }
 //根据城市获取区域
 public String getAreaByCity(){
  List<Area> areaList = dao.getAreaByCityCode(bean.getCity());
  areas = new ArrayList<String>();
  for(int i=0;i<areaList.size();i++){
   Area area = areaList.get(i);
   areas.add(area.getName());
  }
  return SUCCESS;
 }
 //利用json传送的集合数据
 private List<String> citys;
 private List<String> areas;
 public List<String> getCitys() {
  return citys;
 }
 public List<String> getAreas() {
  return areas;
 }
}

3）struts2配置文件

<struts>
 <!-- extends="json-default" -->
 <package name="code_" extends="json-default">
  <global-results>
   <result name="error">/index.jsp</result>
  </global-results>
  <action name="PCA_*" class="json.ProvinceCityAreaAction" method="{1}">
   <result name="main">/ProvinceCityArea.jsp</result>
   <!-- type="json"
    框架会自动去action中查找对应方法中存在的并且在类中有getxxx()方法的属性
   -->
   <result name="success" type="json"></result>
  </action>
 </package>
</struts>