在我们做Web开发中,用到Ajax的地方可谓是随处可见。在Webx的官方文档中,对于Ajax没有明确的支持说明,但是我们可以用另外的两种请求方式来变相实现这种效果。一种是.do请求,一种是.json请求,另一种还是json请求,一种是.htm请求。下面我们来对这四种请求方式做个说明。
.do请求
对于.do请求官方的说明是不需要有返回页面的请求,注意了:不需要返回页面的请求,和我们的需求有点相似啊。因为Ajax请求也是不要返回页面,只需要把数据输出到
浏览器端就行了。OK,下面我们用一个城市二级联动的代码来说明:
前台页面:
首先,从后台取出省的数据,在页面上进行渲染:
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js"></script> 第一种Ajax方式 <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> <input type="hidden" value="getCityByProvinceEname.do" name="urlName_fir"> <br/>
添加onchange事件
<script> $(function(){ <!--城市二级联动--> $("select[name^='provinceEname']").each(function(j){ $(this).on('change',function(){ var cityVal = $(this).val(); var uri = $($("input[name^='urlName']")[j]).val(); $.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数据的请求。部分代码如下:
前台代码
第二种Ajax方式 <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> <input type="hidden" value="get_city_by_province_name/china_city.json" name="urlName_sec"> <br/>
<script> $(function(){ <!--城市二级联动--> $("select[name^='provinceEname']").each(function(j){ $(this).on('change',function(){ var cityVal = $(this).val(); var uri = $($("input[name^='urlName']")[j]).val(); $.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>
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, 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中我们需要注意的有三点:1、json请求对应的类要放到screen下面;2、json请求对应的类中不可以用execute方法,因为在找类的处理适配器的时候回出现错误;
3、json请求有两个部分组成,类名/方法名,方法名可以省略do:例如get_city_by_province_name/china_city.json
调用的是GetCityByProvinceName类中的doChinaCity。
.json请求
这是第二种json请求的方式部分代码如下:
前台代码
第三种Ajax方式 <select name="provinceEname_thir"> <option>请选择</option> #foreach($province in $!{provinceChina}) <option value="$!{province.ename}">$!{province.cname}</option> #end </select> <select name="cityEname_thir"> <option>请选择</option> </select> <input type="hidden" value="get_city_by_province_name_thir.json" name="urlName_thir"> <br/>
<script> $(function(){ <!--城市二级联动--> $("select[name^='provinceEname']").each(function(j){ $(this).on('change',function(){ var cityVal = $(this).val(); var uri = $($("input[name^='urlName']")[j]).val(); $.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>后台代码如下:
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 * */ public class GetCityByProvinceNameThir 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); } }说明:在上例中我们发送了一个get_city_by_province_name_thir.json的请求,我们需要在screen下面创建一个对应的类GetCityByProvinceNameThir.java其实和第一种方
式差不多,在这个类中我们需要一个execute方法。这种方式和上面的json请求方式的不同在于,上面的json请求是类+方法名,而这种json请求是类名+execute方法。
.htm请求
.htm请求是Webx中最常见的请求方式,对于这种请求,一定要有一个相对应的页面存在,否则会报错。部分代码如下:
前台代码
第四种Ajax方式 <select name="provinceEname_four"> <option>请选择</option> #foreach($province in $!{provinceChina}) <option value="$!{province.ename}">$!{province.cname}</option> #end </select> <select name="cityEname_four"> <option>请选择</option> </select> <input type="hidden" value="get_city_by_province_name_four.htm" name="urlName_four">
<script> $(function(){ <!--城市二级联动--> $("select[name^='provinceEname']").each(function(j){ $(this).on('change',function(){ var cityVal = $(this).val(); var uri = $($("input[name^='urlName']")[j]).val(); $.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>后台代码如下:
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 * */ public class GetCityByProvinceNameFour 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); } }对于.htm请求和我们常见的.htm请求基本上没什么区别,我们只需要把我们需要的值通过response输出到浏览器端就可以了。
总结:
经过对比我们发现 .do请求、第二种.json请求、.htm请求,后台处理方式基本上没有什么区别,请求方式也几乎一模一样。区别的地方是 .htm请求需要有一个对应的页面,其他
两种请求则不需要。平时工作中任取一种即可满足需要。
详细代码地址:git@code.csdn.net:zknxx/webx.git
如有疑问,欢迎交流。
相关推荐
webx3.0学习小结
WEBX是阿里巴巴的内部框架,“就是把页面与Service层之间的一些Servlet等公共的东西抽象出来,提供相应的服务以提高开发效率(《接口测试之Webx简介》—何晓峰 )”,可以看出,webx和传统的servlet-action模式的...
阿里开源框架webx的文档,想要学习webx或者维护webx的开发者可以下载
webx框架(淘宝框架),webx+spring+ibatis
NULL 博文链接:https://xj84.iteye.com/blog/1850955
Webx及框架简介 ppt 格式
WEBX框架详解,更好的了解Taobao的开发过程,对于新手更容易上手。
webx3 启动顺序,webx使用总结,webx表单提交(感觉你还是看webx文档 貌似更加好哦!那个表单提交写的很是详细)
该文档为官方webx框架文档,对webx进行了全面的讲解,非常实用。
淘宝开源Web开发框架Webx3.0介绍,内附宠物店程序作为例子详细解说webx框架的方方面面。
快速使用 webx 开发web 应用 Webx框架指南 Michael Zhou
阿里巴巴内部J2EE平台 Webx框架简介,现在是webx3.0,而且已经开源!
webx框架是淘宝开发的比较流行的框架,这个是webx框架的入门介绍
Webx3_Guide_Book 用户指南 2001年,阿里巴巴内部开始使用Java Servlet作为WEB服务器端的技术,以取代原先的 Apache HTTPD server和mod_perl的组合。 • 2002年,选择Jakarta Turbine作为WEB框架,并开始在此之上...
WebX入门指南示例程序,通过结合博文:http://blog.csdn.net/fiboliu/article/details/50040273和代码讲解了,WebX入门级的使用指南!
通用WEB框架 Webx ,Webx是建立在Java Servlet API基础上的的通用WEB框架。用Webx搭建的应用可以...
1.webx是阿里巴巴开发的mvc框架(就是spring mvc又封了一层) 2.此项目是个完整的项目,修改数据库配置后可直接运行(搜索data-source.xml) 3.webx自带的持久层是ibatis,我改成了hibernate 3.此为maven项目,jar包在项目...
webx-springExt整合eclipse插件,挺好用的
webx3 PDF(阿里巴巴 前端web框架)