Webx系列之Ajax请求的四种方式
来源:互联网 发布:riverside歌曲知乎 编辑:程序博客网 时间:2024/06/05 16:39
在我们做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/>
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">添加onchange事件</span>
<pre name="code" class="html"><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数据的请求。部分代码如下:
前台代码
<pre name="code" class="html">第二种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/>
<pre name="code" class="html"><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
如有疑问,欢迎交流。
0 0
- Webx系列之Ajax请求的四种方式
- Ajax的四种请求方式
- webx ajax 请求
- JQuery进行Ajax请求的四种方式
- Webx系列之创建Webx工程
- 深入学习ajax系列之二-请求方式
- get、post、ajax、getJSON四种请求方式
- Webx系列之文件上传
- Webx系列之文件下载
- ajax之post请求方式
- ajax的4种常用请求方式
- ajax的三种方式请求
- ajax请求的几种方式
- 关于Post请求的四种方式
- AJAX系列二之XMLHttpRequest的请求和响应
- ajax的四种实现方式介绍
- ajax之get方式请求对特殊字符的处理
- ajax发送请求的方式
- Linux C 指针数组 数组指针 函数指针 的使用实例
- 新闻列表制作小技巧
- 图的应用
- Android:自定义DialogFragment
- angularjs上传文件+jfinal接收上传文件
- Webx系列之Ajax请求的四种方式
- 线程的五大状态
- 三种数据库key
- 三层架构
- LeetCode-258:Add Digits
- LightOJ 1286 - Space Shuttle Experiments 最大流
- 关于JAVA的继承
- 实现servlet的转发和读取Web应用中资源文件【持续更新】
- Java继承相关