struts2中使用AJAX

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

<</span>tr>

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

                                          类别：

                                   </</span>td>

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

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

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

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

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

                                                               ${com.btypename}

                                                        </</span>option>

                                                 </</span>c:if>

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

                                                               ${com.btypename}

                                                        </</span>option>

                                                 </</span>c:forEach>

                                          </</span>select>

                                         

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

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

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

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

                                                               ${com.stypename}

                                                        </</span>option>

                                                        </</span>c:if>

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

                                                               ${com.stypename}

                                                        </</span>option>

                                                 </</span>c:forEach>

                                          </</span>select>

                                   </</span>td>

                            </</span>tr>

       Js代码：    

<</span>script type="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(var i in list){

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

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

                                                        }

                                                 }, "json");

                                  

                            }

 

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

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

import java.util.List;

 

import com.defu.service.Mainservice;

import com.defu.vo.Smalltype;

import com.opensymphony.xwork2.ActionSupport;

 

public class TypeActiveAction extends ActionSupport{

String bigtypeid;

 

public int getBigtypeid() {

       return Integer.parseInt(bigtypeid);

}

 

public void setBigtypeid(String bigtypeid) {

       this.bigtypeid = bigtypeid;

}

List smalltypelist;

 

public List getSmalltypelist() {

       return smalltypelist;

}

 

public void setSmalltypelist(List smalltypelist) {

       this.smalltypelist = smalltypelist;

}

 

@Override

public String execute() throws Exception {

    Mainservice service=new Mainservice();

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

       return SUCCESS;

}

 

}

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

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

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

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

        </</span>action>

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