封装Ajax 请求

 1. Ajax封装代码

(function($) {
	$.extend({
		/**
		 * 通用POST请求方式, 
		 * url:请求路径
		 * param:请求参数
		 * success:请求成功回调
		 * failed:请求失败回调
		 */
		"postRequest" : function(url, param, success, failed) {
			var postJqXHR = $.post({
				url : url,
				data : param,
				contentType : 'application/json'
			});

			postJqXHR.success(function(result) {
				//返回结果判断
				if (result.status == 200 && $.isFunction(success)) {
					success(result);
				} else {
					toastr.error(result.msg);
				}
			});
			postJqXHR.fail(function(errorObj) {
				//请求失败
				if (errorObj != null)
					toastr.error(errorObj.msg);
				if ($.isFunction(failed)) {
					failed(errorObj);
				}
			});
		},

		/**
		 * 通用GET请求方式, 
		 * url:请求路径
		 * param:请求参数
		 * success:请求成功回调
		 * failed:请求失败回调
		 */
		"getRequest" : function(url, param, success, failed) {
			var getJqXHR = $.get({
				url : url,
				data : param
			});
			
			getJqXHR.success(function(result) {
				//返回结果判断
				if (result.status == 200 && $.isFunction(success)) {
					success(result);
				} else {
					toastr.error(result.msg);
				}
			});

			getJqXHR.fail(function(errorObj) {
				//请求失败
				if (errorObj != null)
					toastr.error(errorObj.msg);
				if ($.isFunction(failed)) {
					failed(errorObj);
				}
			});
		}
	});
})(jQuery);

1.1 调用代码

$.getRequest("/get/reqUrl", param, function(result) {
	// 数据返回操做
});

解释:getRequest接受4个参数,以上代码第4个参数(失败的回调函数)没有给出,由于通用请求JS对“请求失败”和“后台返回结果”的信息都作了处理,调用方JS只注重业务返回结果的操做,这也是封装Ajax请求的优势(我的体会)。javascript

url:请求地址,java

param:请求参数json

success:请求成功的回调函数app

failed:请求失败的回调函数函数

相关文章
相关标签/搜索