在我们做Web开发中,用到Ajax的地方可谓是随处可见。在Webx的官方文档中,对于Ajax没有明确的支持说明,但是我们可以用另外的两种请求方式来变相实现这种效果。一种是.do请求,一种是.json请求。下面我们来对这两种请求方式做个说明。
.do请求
浏览器端就行了。OK,下面我们用一个城市二级联动的代码来说明:
前台页面:@H_502_19@
<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下面。
@H_403_45@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
如有疑问,欢迎交流。
原文链接:https://www.f2er.com/ajax/162150.html
<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下面。
.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方法,因为在找类的处理适配器的时候回出现错误;