struts2中使用AJAX

在struts2中使用Ajax非常爽，特别好用，今天做网上花店，说一个添加花的功能吧，花有大类别和小类别之分，这么说吧，有个特别突出的类似的使用地方就是省市级联的下拉列表框，花有大的分类和小的分类，所以用到了联动方式，上网时在很多网页都有看到这种效果，向人人网的选择省就可以显示对应的该省的大学等等。在Struts2中就可以非常轻松的实现，当然，不用struts2也可以实现，其实说到底原理是一样的。下面是jsp页面的部分代码，包括js代码：

<</span>tr>

                                  <</span>tdstyle="font-size: 14; font-weight: bold;">

                                         类别：

                                  </</span>td>

                                  <</span>tdstyle="font-size: 14; font-weight: bold;">

                                         范围：<</span>selectname="flowerDetail.type.btypeid" size="1" id="bigtypes" onchange="changeSmalltype(this)">  

                                         <</span>c:forEachvar="com" items="${requestScope.bigtypes}">

                                         <</span>c:iftest="${requestScope.flowerdetail.type.btypeid==com.id}">

                                                <</span>optionvalue="${com.id}" selected="selected">

                                                              ${com.btypename}

                                                       </</span>option>

                                                </</span>c:if>

                                                       <</span>optionvalue="${com.id}">

                                                              ${com.btypename}

                                                       </</span>option>

                                                </</span>c:forEach>

                                         </</span>select>

                                         

                                         花类：<</span>selectname="flowerDetail.flower.flotype"size="1" id="smalltypes">      

                                         <</span>c:forEachvar="com" items="${requestScope.smalltypes}">

                                         <</span>c:iftest="${requestScope.flowerdetail.flower.flotype==com.id}">

                                                <</span>optionvalue="${com.id}" selected="selected">

                                                              ${com.stypename}

                                                       </</span>option>

                                                       </</span>c:if>

                                                                     <</span>optionvalue="${com.id}">

                                                             ${com.stypename}

                                                       </</span>option>

                                                </</span>c:forEach>

                                         </</span>select>

                                  </</span>td>

                           </</span>tr>

      Js代码：    

<</span>scripttype="text/javascript">

                           function changeSmalltype(vadd){

                                  var bigtypeid=vadd.value;

                                  var optionSmalltype;

                                 $.post('${pageContext.request.contextPath}/ajax/changesmalltypetwo.action',{'bigtypeid': bigtypeid},function(data) {

                                                       document.getElementByIdx_x("smalltypes").options.length=0;

                                                       var list=data.smalltypelist;

                                                       for(vari inlist){

                                                              optionSmalltype=newOption(list[i].stypename,list[i].id);

                                                             document.getElementByIdx_x("smalltypes").options.add(optionSmalltype);

                                                       }

                                                }, "json");

                                  

                           }

 

//别忘了导入jquery的js文件

这个代码贴出来有点恐怖啊：

importjava.util.List;

 

importcom.defu.service.Mainservice;

importcom.defu.vo.Smalltype;

importcom.opensymphony.xwork2.ActionSupport;

 

publicclass TypeActiveAction extendsActionSupport{

String bigtypeid;

 

publicint getBigtypeid() {

      return Integer.parseInt(bigtypeid);

}

 

publicvoid setBigtypeid(String bigtypeid) {

      this.bigtypeid=bigtypeid;

}

List smalltypelist;

 

publicList getSmalltypelist() {

      return smalltypelist;

}

 

publicvoid setSmalltypelist(List smalltypelist) {

      this.smalltypelist =smalltypelist;

}

 

@Override

publicString execute() throwsException {

   Mainservice service=newMainservice();

      setSmalltypelist(service.getSmalltypes(this.getBigtypeid()));

      return SUCCESS;

}

 

}

红色字体的代码是从数据库中查出符合条件的数据然后存到smalltypelist中，只要smalltypelist有get方法，在jsp页面就可以取到，是不是很方便啊，奥对了，struts会把内容封装为json格式的，说到这，还要考虑配置信息：

      <</span>packagename="ajax" extends="json-default"namespace="/ajax">

             <</span>actionname="changesmalltypetwo" class="com.defu.shopaction.TypeActiveAction">

                    <</span>resultname="success" type="json"></</span>result>

       </</span>action>

 其他需要注意的，我用特殊颜色标出来了。注意就是了！