建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何使用jqueryajax方法封裝及api文件
這篇文章將為大家詳細(xì)講解有關(guān)如何使用jquery ajax方法封裝及api文件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
創(chuàng)新互聯(lián)建站主營柳林網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),柳林h5小程序開發(fā)搭建,柳林網(wǎng)站營銷推廣歡迎柳林等地區(qū)企業(yè)咨詢
封裝 jquery ajax 文件
/**
* 封裝 jquery ajax
* 例如:
* ajaxRequest.ajax.triggerService(
* 'apiCommand', [命令數(shù)據(jù)] )
* .then(successCallback, failureCallback);
* );
*/
var JSON2 = require('LibsDir/json2');
var URL = '../AjaxHandler.aspx?r=';
// 用來記錄每次請求的唯一標(biāo)識
var requestIdentifier = {};
// 唯一標(biāo)識生成方法
function generateGUID() {
var d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
d += performance.now();
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
}
// 模塊主體
var ajaxRequest = ajaxRequest || {};
(function ($) {
if (!$) {
throw 'jquery獲取失敗!';
}
ajaxRequest.json = JSON2;
ajaxRequest.ajax = function (userOptions, serviceName, requestId) {
userOptions = userOptions || {};
var options = $.extend({}, ajaxRequest.ajax.defaultOpts, userOptions);
options.success = undefined;
options.error = undefined;
return $.Deferred(function ($dfd) {
$.ajax(options)
.done(function (result, textStatus, jqXHR) {
if (requestId === requestIdentifier[serviceName]) {
// 比對請求id, 保證返回結(jié)果的正確性 (重復(fù)請求有可能會帶來返回結(jié)果不可靠的問題)
ajaxRequest.ajax.handleResponse(result, $dfd, jqXHR, userOptions, serviceName, requestId);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
if (requestId === requestIdentifier[serviceName]) {
// jqXHR.status
$dfd.reject.apply(this, arguments);
userOptions.error.apply(this, arguments);
}
});
});
};
$.extend(ajaxRequest.ajax, {
// $.ajax() 的默認(rèn)設(shè)置
defaultOpts: {
// url: '../AjaxSecureHandler.aspx,
dataType: 'json',
type: 'POST',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
},
handleResponse: function (result, $dfd, jqXHR, userOptions, serviceName, requestId) {
if (!result) {
$dfd && $dfd.reject(jqXHR, 'error response format!');
userOptions.error(jqXHR, 'error response format!');
return;
}
// 服務(wù)器已經(jīng)錯誤
if (result.ErrorCode != '200') {
$dfd && $dfd.reject(jqXHR, result.ErrorMessage);
userOptions.error(jqXHR, result);
return;
}
if (result.Data) {
// 將大于2^53的數(shù)字(16位以上)包裹雙引號, 避免溢出
var jsonStr = result.Data.replace(/(:\s*)(\d{16,})(\s*,|\s*})/g, '$1"$2"$3');
var resultData = ajaxRequest.json.parse(jsonStr);
$dfd.resolve(resultData);
userOptions.success && userOptions.success(resultData);
} else {
$dfd.resolve();
userOptions.success && userOptions.success();
}
},
buildServiceRequest: function (serviceName, input, userSuccess, userError, ajaxParams) {
// 這里是根據(jù)后臺要求構(gòu)建的
var requestData = {
MethodAlias: serviceName, // 方法名
Parameter: input // 傳遞的參數(shù)
};
var request = $.extend({}, ajaxParams, {
// 這里要對傳遞的 JSON 字符串參數(shù)數(shù)據(jù)使用 escape 方法進(jìn)行編碼
// 'data=' 是根據(jù)項(xiàng)目約定增加的，與 contentType 相對應(yīng)
data: 'data=' + escape(ajaxRequest.json.stringify(requestData)),
success: userSuccess,
error: function (jqXHR, textStatus, errorThrown) {
// 這里是在請求出錯的時候做一個統(tǒng)一處理, 輸出方法名和錯誤對象
console.log(serviceName, jqXHR);
if (userError && (typeof userError === 'function')) {
userError(jqXHR, textStatus, errorThrown);
}
}
});
return request;
},
// 構(gòu)建參數(shù)對象, 生成唯一標(biāo)識, 觸發(fā)請求
triggerService: function (serviceName, input, success, error, ajaxParams) {
var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams);
// 生成此次 ajax 請求唯一標(biāo)識
var requestId = requestIdentifier[serviceName] = generateGUID();
request.url = URL + requestId;
return ajaxRequest.ajax(request, serviceName, requestId);
}
});
})(jQuery);
module.exports = ajaxRequest;api 文件示例
/**
* api 接口定義
* 這個示例中假設(shè)后臺服務(wù)要求接受數(shù)組形式的參數(shù)
*/
var ajaxRequest = require('../common/ajax-request'); // ajax 封裝
var JSON2 = require('LibsDir/json2');
// 請求數(shù)據(jù)方法
var apiService = (function () {
var request = {};
// 產(chǎn)品列表 (參數(shù)需要進(jìn)一步處理的情況)
request.getProductListData = function (conditionObj) {
return ajaxRequest.ajax.triggerService('SearchProductList', [JSON2.stringify(conditionObj)]);
};
// 搜索熱詞 (參數(shù)為空的情況)
request.getHotWords = function () {
return ajaxRequest.ajax.triggerService('GetSearchHotKeys', []);
};
// 獲取用戶配置
request.getUserConfig = function () {
return ajaxRequest.ajax.triggerService('GetUserConfig', []);
};
// 設(shè)置用戶配置
request.setUserConfig = function (params) {
return ajaxRequest.ajax.triggerService('SetUserConfig', [params]);
};
return request;
})();
module.exports = apiService;業(yè)務(wù)代碼中調(diào)用 api 接口
// 綜合搜索熱詞查詢
apiService.getHotWords()
.then(function (result) {
if (result.length > 0) {
// 成功回調(diào)
// handleResult(result);
}
})
.fail(function (err) {
console.log('GetSearchHotKeys: ', err);
// 失敗回調(diào)
handleResult();
});關(guān)于如何使用jquery ajax方法封裝及api文件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
本文標(biāo)題：如何使用jqueryajax方法封裝及api文件
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/ieggee.html
