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

由于在项目开发中经常需要用到下拉框,有的时候下拉框的内容还需要根据情况来加载,虽然在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" οnchange="provinceChange(this);" list="provinces" listKey="regionCode" listValue="regionName" value="default_provinces_code"></s:select>&nbsp;
                      <s:select name="ecinfo.cityCode" list="citys" listKey="regionCode" listValue="regionName" value="default_city_code"></s:select>