封装Ajax 请求

2019独角兽企业重金招聘Python工程师标准>>>

 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请求的优点（个人体会）。

url：请求地址，

param：请求参数

success：请求成功的回调函数

failed：请求失败的回调函数

转载于:https://my.oschina.net/u/2433960/blog/915745