如何使用jqueryajax方法封装及api文件
这篇文章将为大家详细讲解有关如何使用jquery ajax方法封装及api文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站主营柳林网站建设的网络公司,主营网站建设方案,成都app软件开发,柳林h5小程序开发搭建,柳林网站营销推广欢迎柳林等地区企业咨询
封装 jquery ajax 文件
/** * 封装 jquery ajax * 例如: * ajaxRequest.ajax.triggerService( * 'apiCommand', [命令数据] ) * .then(successCallback, failureCallback); * ); */ var JSON2 = require('LibsDir/json2'); var URL = '../AjaxHandler.aspx?r='; // 用来记录每次请求的唯一标识 var requestIdentifier = {}; // 唯一标识生成方法 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, 保证返回结果的正确性 (重复请求有可能会带来返回结果不可靠的问题) 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() 的默认设置 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; } // 服务器已经错误 if (result.ErrorCode != '200') { $dfd && $dfd.reject(jqXHR, result.ErrorMessage); userOptions.error(jqXHR, result); return; } if (result.Data) { // 将大于2^53的数字(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) { // 这里是根据后台要求构建的 var requestData = { MethodAlias: serviceName, // 方法名 Parameter: input // 传递的参数 }; var request = $.extend({}, ajaxParams, { // 这里要对传递的 JSON 字符串参数数据使用 escape 方法进行编码 // 'data=' 是根据项目约定增加的,与 contentType 相对应 data: 'data=' + escape(ajaxRequest.json.stringify(requestData)), success: userSuccess, error: function (jqXHR, textStatus, errorThrown) { // 这里是在请求出错的时候做一个统一处理, 输出方法名和错误对象 console.log(serviceName, jqXHR); if (userError && (typeof userError === 'function')) { userError(jqXHR, textStatus, errorThrown); } } }); return request; }, // 构建参数对象, 生成唯一标识, 触发请求 triggerService: function (serviceName, input, success, error, ajaxParams) { var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams); // 生成此次 ajax 请求唯一标识 var requestId = requestIdentifier[serviceName] = generateGUID(); request.url = URL + requestId; return ajaxRequest.ajax(request, serviceName, requestId); } }); })(jQuery); module.exports = ajaxRequest;
api 文件示例
/** * api 接口定义 * 这个示例中假设后台服务要求接受数组形式的参数 */ var ajaxRequest = require('../common/ajax-request'); // ajax 封装 var JSON2 = require('LibsDir/json2'); // 请求数据方法 var apiService = (function () { var request = {}; // 产品列表 (参数需要进一步处理的情况) request.getProductListData = function (conditionObj) { return ajaxRequest.ajax.triggerService('SearchProductList', [JSON2.stringify(conditionObj)]); }; // 搜索热词 (参数为空的情况) request.getHotWords = function () { return ajaxRequest.ajax.triggerService('GetSearchHotKeys', []); }; // 获取用户配置 request.getUserConfig = function () { return ajaxRequest.ajax.triggerService('GetUserConfig', []); }; // 设置用户配置 request.setUserConfig = function (params) { return ajaxRequest.ajax.triggerService('SetUserConfig', [params]); }; return request; })(); module.exports = apiService;
业务代码中调用 api 接口
// 综合搜索热词查询 apiService.getHotWords() .then(function (result) { if (result.length > 0) { // 成功回调 // handleResult(result); } }) .fail(function (err) { console.log('GetSearchHotKeys: ', err); // 失败回调 handleResult(); });
关于如何使用jquery ajax方法封装及api文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前标题:如何使用jqueryajax方法封装及api文件
标题URL:http://scyanting.com/article/ieggee.html