对ajax请求的简单封装,操作更方便
我这里的接口数据调用的js叫interface.js,接口路径管理的js叫webSiteControl.js
/**
* Created by l2776 on 2017/7/11.
* 接口数据调用
* version 1.3
*/
'use strict'; define(function(require, exports, module) {
"require:nomunge,exports:nomunge,module:nomunge";
var reqTimeStart = window.setTimeout(function (data) {
console.log("正在加载中"+data);
},1000);
function CheackJSON(data) {
try{
var CheckJSONParseData = JSON.parse(data);
return 'application/json;charset=utf-8';
}catch(e){
return 'application/x-www-form-urlencoded';
}
}
function AjaxReport(data) {
var newInfoRequare = {};
newInfoRequare = data;
newInfoRequare.randomIf?newInfoRequare.requestData['rdm'] = Math.random():"";
$.ajax({
url: newInfoRequare.interfaceName?Add.GetInterfaceSite(newInfoRequare.interfaceName):false,
data: newInfoRequare.requestData,
type: newInfoRequare.requestType,
timeout: newInfoRequare.timout,
dataType:"JSON",
contentType:CheackJSON(newInfoRequare.requestData),
async:true,
success: function (result) {
result.errorCode=='03'?require.async('./ReloginFunction.min',function (a) {
a.Relogin('zewei',newInfoRequare);
}):newInfoRequare.callback(result);
},
error: function (xhr, status) {
require.async(['./ErrFun','./InfeErrFuntion'],function (a,b) {
navigator.onLine?a.Toset('网络错误,请重新请求!!'):a.Toset('接口请求有误');
b.getErrInterfaceMsg(newInfoRequare.interfaceName,xhr);
});
},
complete: function (xhr, status) {
window.clearTimeout(reqTimeStart);
}
});
}
var Add = require('./webSiteControl');
exports.getDataFromServer = function(){
var InfoRequare = {};
InfoRequare.interfaceName = arguments[0] || false;//接口名称(必填),不填报错
InfoRequare.requestData = arguments[1] || {};//请求参数对象,默认为空对象
InfoRequare.callback = arguments[2]||"" ;//回调地址,会带数据一起返回,默认为空
InfoRequare.requestType = arguments[3] || "GET";//请求方式默认GET
InfoRequare.randomIf = arguments[4] || false ;//接口是否需要缓存默认不需要
InfoRequare.timout = arguments[5] || 60000;//超时判定
new AjaxReport(InfoRequare);
}
}); 写在外部,在页面上调用即可。其中var Add = require('./webSiteControl');是调用的另一个同级webSiteControl.js,代码如下:
/**
* Created by l2776 on 2017/7/11.
* 接口路径管理
* version 1.0
*/
'use strict';
define(function(require, exports, module) {
"require:nomunge,exports:nomunge,module:nomunge";
exports.GetInterfaceSite = function (interfaceName) {
var ishttps = 'https:' == document.location.protocol ? true: false;//判定对象是否是SSL加密传输
var SiteHead = function(data){
if(data.indexOf('mg/')>=0 || data == 'BannerInfo/BusinessBannerInfo'){
return '/ypm/'
}else{
return '/queryInfo/'
}
};
if(ishttps){
return 'https://'+window.location.host+SiteHead(interfaceName)+interfaceName;
}else {
return 'http://'+window.location.host+SiteHead(interfaceName)+interfaceName;
}
}
});
因为我常用的接口都是ypm/mg/..和queryInfo/..开头的,所以这里你需要把你自己要调用的接口换上;或者再优化整合一下
事例:
/**
* Created by admin on 2017/7/11.
*/
define(function (require, exports, module) {
var ind = require("../interface");
ind.getDataFromServer('mg/selectOrgCollections', "", getSelectInfo, "GET", true);
function getSelectInfo(data) {
//回调函数
}
})
虽然封装的时候很写的很多,但是以后再用到ajax只需要调用一下即可,再也不用写那么多了,而且有利于代码优化复用
$.ajax({
type: "GET",
url: "test.json",
data: {},
dataType: "json",
success: function () {
}
});
对ajax请求的简单封装,操作更方便的更多相关文章
- js 实现对ajax请求面向对象的封装
AJAX 是一种用于创建高速动态网页的技术.通过在后台与server进行少量数据交换.AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行 ...
- ajax请求完成执行的操作
var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...
- 使用ajax技术实现简单登录操作
1.ajax:特点在web上面通过JavaScript,使用异步的XmlHttp请求,实现无刷新的Web界面 首先:创建ajax对象 再次:向服务器端实现ajax请求 最后:回调 创建异步请求对象 & ...
- ajax代码及简单封装
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...
- java 接口自动化测试之数据请求的简单封装
我们自己用java写接口自动化测试框架或者做个接口自动化测试平台的话,是需要自己进行相关的请求的,因此我们需要简单的封装下httpclient,我新建了一个http工具类,将get方法和post方法进 ...
- 小程序 请求Promise简单封装
最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参 ...
- Angular:使用service进行http请求的简单封装
①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...
- 关于Ajax请求的JS封装函数
每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式, get/post 'url' : 提交地址, ...
- ajax正确的简单封装“姿势”
window.meng = window.meng || {}; (function ($) { function getAjaxDate(url, apikey) { var datas; $.aj ...
随机推荐
- 201521123057 《Java程序设计》第2周学习总结
1. 本章学习总结 本周Java教学主要围绕Java的基本语法展开.在本周的学习中,我了解到了: -Integer的取值范围 -if...else条件式,switch条件式,while循环,break ...
- Python[小甲鱼006常用操作符]
1.操作符 下面有一些需要注意的操作符 >>>3 ** 2 9 上面这个代表着平方 即 3的平方 >>>3 ** 5 243 ...
- java课程设计(团队)-五子棋
单机五子棋小游戏 一:团队介绍 组长:网络1511,毛卓 组员:网络1511,朱潞潞 组员:网络1511,范阳斌 二:项目git提交记录截图 三:项目使用主要技术 netBeans,GUI 四:项目特 ...
- 控制结构(5) 必经之地(using)
// 上一篇:局部化(localization) // 下一篇:最近最少使用(LRU) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一周,我们谈到了分支/卫语句 ...
- Android之View绘制流程开胃菜---setContentView(...)详细分析
版权声明:本文出自汪磊的博客,转载请务必注明出处. 1 为什么要分析setContentView方法 作为安卓开发者相信大部分都有意或者无意看过如下图示:PhoneWindow,DecorView这些 ...
- java.lang.IllegalArgumentException: object is not an instance of declaring class
今天在使用反射的时候,出现了java.lang.IllegalArgumentException: object is not an instance of declaring class错误-具体是 ...
- 利用ADO让普通人用excel读取oracle数据库表的通用办法
Ref:http://blog.csdn.net/iamlaosong/article/details/8465177 Excel通过ADO方式连接到Oracle并操作Oracle给那些编程能力不强的 ...
- GCD之异步同步体会
前面的博文也有写到同步异步,可能是看他人的博文,自己没有实验,感觉理解不深,所以就敲了些代码比较一下串行.并行分别对应的同步.异步. 1.首先创建串行.并行线程队列 1 2 dispatch_queu ...
- MXNet--DMLC-Core代码解读与宏
MXNet--DMLC-Core代码解读与宏 dmlc-core是Distributed (Deep) Machine Learning Community的一个基础模块,这个模块用被应用到了mxne ...
- 使用SoapUI工具做get请求和post请求接口测试
祝大家节日快乐啦. 之前写过的一篇帖子已经介绍了SoapUI工具的基本使用,所以在此不再重复讲解关于建工程.建测试套件.添加用例等操作,可查看该篇文章详解:http://www.cnblogs.com ...