对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 ...
随机推荐
- 201521123065《java程序设计》第14周学习总结
1. 本周学习总结 1.大部分情况下使用的数据库是关系型的数据库,使用表存储数据: 2.关系型数据库可以通过唯一的主键查找记录,也可以通过多个信息确定主键: 3.Mysql操作:显示-show dat ...
- 201521123035《Java程序设计》第十周实验总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- php数据库连接及简单操作
数据库改密码:mysql的控制台mysql console 中文乱码解决方法:原因编码格式不一致1.建立数据库的时候,字符集选择utf-82.修改mysql的配置:在[mysqld]模块下面添加cha ...
- 多线程面试题系列(3):原子操作 Interlocked系列函数
上一篇中讲到一个多线程报数功能.为了描述方便和代码简洁起见,我们可以只输出最后的报数结果来观察程序是否运行出错.这也非常类似于统计一个网站每天有多少用户登录,每个用户登录用一个线程模拟,线程运行时会将 ...
- xml是什么,为什么要用xml
XML概念 众所周知,xml常用语数据存储和传输,文件后缀为 .xml: 它是可扩展标记语言(Extensible Markup Language,简称XML),是一种标记语言. 标记,指计算机所能理 ...
- centOS 6 服务管理与服务脚本
服务管理与服务脚本 linux服务 服务管理与服务脚本 linux服务 服务启动过程详解 chkconfig命令 非独立服务与xinetd进程 一个特殊的服务脚本 服务启动过程详解 在开机启动 ...
- 为什么Java中的String类是不可变的?
String类是Java中的一个不可变类(immutable class). 简单来说,不可变类就是实例在被创建之后不可修改. 在<Effective Java> Item 15 中提到了 ...
- 基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...
- TETELaser Cutting System 不连续吹起的问题
TETELaser Cutting System 不连续吹起的问题 :配置 加工参数-->机器参数-->信号灯和激光器报警:黄灯索引==EX14 红灯索引==EX15 绿灯索引= ...
- Elixir游戏服设计二
搞一个例子,而没有实际的目标,做起来真是烦人.几次三番都想放弃. 后来想想,即使最后完成不了完整的服务器,把需要的知识点搞搞,摸熟悉也是好的. 这里没有完整的项目目录,主要是对需要的指点进行整理.要完 ...