Webx系列之Ajax请求的四种方式

简介: 在我们做Web开发中,用到Ajax的地方可谓是随处可见。在Webx的官方文档中,对于Ajax没有明确的支持说明,但是我们可以用另外的两种请求方式来变相实现这种效果。一种是.do请求,一种是.json请求,另一种还是json请求,一种是.htm请求。下面我们来对这四种请求方式做个说明。 .do请求 对于.do请求官方的说明是不需要有返回页面的请求,注意了:不需要返回页面的请求,和我们

在我们做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类中的doC hinaCity。

.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

如有疑问,欢迎交流。
相关文章
|
2月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
29 2
|
2月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
2月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
67 1
|
20天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
27天前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
14天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
2月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
1月前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
2月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
38 3
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装