对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 ...
随机推荐
- Java课程设计-计算器
1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 监听器的设置 3.自己的代码提交记录截图 //注册各个组件 ...
- 在控制台显示“Hello World”
//作者:江骆 //功能:在控制台显示"Hello World" //日期:2017.7.19 public class helloworld //public 表示公共类,一 ...
- SSH复用代码最终版
web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="h ...
- 浅谈SQL优化入门:3、利用索引
0.写在前面的话 关于索引的内容本来是想写的,大概收集了下资料,发现并没有想象中的简单,又不想总结了,纠结了一下,决定就大概写点浅显的,好吧,就是懒,先挖个浅坑,以后再挖深一点.最基本的使用很简单,直 ...
- 接口测试入门(3)--使用httpClient进行登录用例操作/set-cookies验证/ List<NameValuePair>设置post参数/json解析
(最近学的都是很基础的接口测试,都是基于UI界面可见的接口,就是发请求,接收响应,分析返回的结果,校验,对共通模块进行封装,仅此而已,其实做自动化的思路基本都是如此,UI也是.) 现在开始用httpC ...
- geotrellis使用(三十四)矢量瓦片技术研究——矢栅一体化
前言 本文所涉及技术与Geotrellis并无太大关系,仅是矢量瓦片前端渲染和加载技术,但是其实我这是在为Geotrellis的矢量瓦片做铺垫.很多人可能会说,Geotrellis为什么要搞矢量瓦片, ...
- 框架应用:Mybatis (三) - 关系映射
你有一张你自己的学生证?(一对一) 你这一年级有多少个学生?(一对多) 班上学生各选了什么课?(多对多) 两张表以上的操作都需要联立多张表,而用SQL语句可以直接联立两张表,用工程语言则需要手动完成这 ...
- android自定义动画
前一篇说了实现过程,这次来写一个自己简单实现的3d动画 先来属性声明配置,方便使用xml 文件来定制动画 <!-- 有些类型其实是没必要的,只是实例代码,为了更具有代表性 --> < ...
- JavaScript一些常用方法一
整理以前的笔记,在学习JavaScript时候,经常会用到一些方法,但是有时忘掉了具体用法,因此记下.方便以后查阅. 这篇博文先说明这些方法的用途: splice().push().pop() .sh ...
- mysql 实验论证 innodb表级锁与行级锁
innodb 的行锁是在有索引的情况下,没有索引的表是锁定全表的. 表锁演示(无索引) Session1: mysql> set autocommit=0; mysql> select * ...