在我们做Web开发中，用到Ajax的地方可谓是随处可见。在Webx的官方文档中，对于Ajax没有明确的支持说明，但是我们可以用另外的两种请求方式来变相实现这种效果。一种是.do请求，一种是.json请求。下面我们来对这两种请求方式做个说明。
.do请求
浏览器端就行了。OK，下面我们用一个城市二级联动的代码来说明：
前台页面：
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js"></script>
<select name="provinceEname_fir">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_fir">
<option>请选择</option>
</select>
添加onchange事件
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',function(){
var cityVal = $(this).val();
var uri = "";
if(j==0){
uri = "getCityByProvinceEname.do";
}else if(j==1){
uri = "get_city_by_province_name/china_city.json";
}
$.ajax({
type:"post",data:{"cityEname":cityVal},dataType:"json",url:uri,success:function(msg){
if(msg != "{}"){
$($("select[name^='cityEname']")[j]).empty();
for(var i=0;i<msg.length;i++){
$($("select[name^='cityEname']")[j]).append("<option value='"+msg[i].id+"'>"+msg[i].name+"</option>");
}
}else{
}
},error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script> 当省变动是会触发onchange事件，发送getCityByProvinceEname.do请求，后台存在一个请求接收类。这个时候需要注意两点：
1、类的名字要和请求一样，首字母大写，2、类的路径要放在screen下面。
package com.alibaba.webx.MyWebxTest.myWebX.module.screen; import java.io.OutputStream; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.alibaba.citrus.turbine.Context; import com.alibaba.citrus.turbine.dataresolver.Param; import com.alibaba.webx.MyWebxTest.base.BaseScreenAction; import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO; /** * * @author zkn 2016-05-15 * */ public class GetCityByProvinceEname extends BaseScreenAction { public void execute(@Param("cityEname") String cityEname,Context context){ List<CityChinaDO> listCity = mainService.getAddressService().getAllCityByEname(cityEname); List<Map<String,String>> list = new ArrayList<Map<String,String>>(); OutputStream os = null; for (CityChinaDO city : listCity) { Map<String,String> map = new HashMap<String,String>(); map.put("id",city.getEcityName()); map.put("name",city.getCcityName()); list.add(map); } String str = listToJson(list); cloSEOutStream(os,str); } }
.json请求
.json请求，从名字我们可以看出是一个json相关的请求，它是一个接收json数据的请求。部分代码如下：
<select name="provinceEname_sec">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_sec">
<option>请选择</option>
</select>
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script>
package com.alibaba.webx.MyWebxTest.myWebX.module.screen; import java.io.OutputStream; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.alibaba.citrus.turbine.Context; import com.alibaba.citrus.turbine.dataresolver.Param; import com.alibaba.webx.MyWebxTest.base.BaseScreenAction; import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO; /** * * @author zkn 2016-05-15 * */ public class GetCityByProvinceName extends BaseScreenAction { public void doChinaCity(@Param("cityEname") String cityEname,str); } }在json中我们需要注意的有三点： 1、json请求对应的类要放到screen下面；2、json请求对应的类中不可以用execute方法，因为在找类的处理适配器的时候回出现错误；
详细代码地址：git@code.csdn.net:zknxx/webx.git
如有疑问，欢迎交流。
