利用json2和Struts2来实现下拉框的无刷新联动

jeooo.li

由于在项目开发中经常需要用到下拉框,有的时候下拉框的内容还需要根据情况来加载,虽然在Struts中可以根据form来加载ajax模板和dwr来实现,但这样一来就显得不那么灵活了,所以试着用prototype+json2来实现。
 
1、需要用到的相关实体类
public class TsysRegion implements java.io.Serializable
{
    private long regionId;
    private String regionName;
    private String regionCode;
    private long parentRegionId;
}
 
public class Dict
{
    private String code;
    private String name;
}
 
 
2、Struts2 Action类的代码如下：
public class EcPreRegisterAction
{
      // 申请业务类变量
       private IRegionManagerService regionManagerService;
 
      // 定义省份编码
       private String provinceCode;
       private String strCitys;
 
       public EcPreRegisterAction()
      {
        // 从Spring配置文件中获取Bean.
        regionManagerService = getBean("regionManagerService");
      }
 
public String getCitysByProvinceCode() throws Exception
    {
       // 根据省份编码来获取地市
        List<TsysRegion> list =       regionManagerService.getChildrenRegions(provinceCode,Consts.YesOrNo.YES);

        List<Dict> city = new ArrayList<Dict>();
        Map citysMap = new HashMap();
        for(TsysRegion value:list)
        {
            //citysMap.put(value.getRegionCode(), value.getRegionName());
            city.add(new Dict(value.getRegionCode(), value.getRegionName()));
        }
       
        JSONArray jsonObject = JSONArray.fromObject(city);
        strCitys = jsonObject.toString();
        return SUCCESS;
    }
}
 
3、Struts.xml配置文件
<package name="ecm-preRegister-ajax" extends="json-default" namespace="/ec/ecmanager">
<action name="getCitysByProvinceCode" class="com.ec.ecmanager.action.EcPreRegisterAction" method="getCitysByProvinceCode">
          <result type="json">
            <param name="includeProperties">strCitys</param>
            </result>
         </action>
</package>
4、jsp页面的脚本
function provinceChange(obj)
   {
     var url='getCitysByProvinceCode.action?provinceCode=' + obj.options[obj.selectedIndex].value;
     var params = Form.serialize('form1');
     var myajax = new Ajax.Request(url,
            {
        method:'post',
        parameters:params,
        onComplete:function(request)
        {
          var select =document.getElementById("form1_ecinfo_cityCode");
          select.innerHTML = "";
          var action = JSON.parse(request.responseText);
          var citys = eval(action.strCitys);
          for(var i=0;i<citys.length;i++)
          {
           var _o = new Option();
           _o.text = citys[i].name;
           _o.value = citys[i].code;
           select.options.add(_o);
          }
        },
        asynchronous:true
        }
    );
   }
 
5、jsp页面的下拉框
  <s:select name ="ecinfo.provinceCode" onchange="provinceChange(this);" list="provinces" listKey="regionCode" listValue="regionName" value="default_provinces_code"></s:select> 
                      <s:select name="ecinfo.cityCode" list="citys" listKey="regionCode" listValue="regionName" value="default_city_code"></s:select>