我这里的接口数据调用的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请求的简单封装,操作更方便的更多相关文章

  1. js 实现对ajax请求面向对象的封装

             AJAX 是一种用于创建高速动态网页的技术.通过在后台与server进行少量数据交换.AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行 ...

  2. ajax请求完成执行的操作

    var createAjax = $("#createId").ajax(function(){ //ajax操作 }); $.when(createAjax).done(func ...

  3. 使用ajax技术实现简单登录操作

    1.ajax:特点在web上面通过JavaScript,使用异步的XmlHttp请求,实现无刷新的Web界面 首先:创建ajax对象 再次:向服务器端实现ajax请求 最后:回调 创建异步请求对象 & ...

  4. ajax代码及简单封装

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...

  5. java 接口自动化测试之数据请求的简单封装

    我们自己用java写接口自动化测试框架或者做个接口自动化测试平台的话,是需要自己进行相关的请求的,因此我们需要简单的封装下httpclient,我新建了一个http工具类,将get方法和post方法进 ...

  6. 小程序 请求Promise简单封装

    最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参 ...

  7. Angular:使用service进行http请求的简单封装

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...

  8. 关于Ajax请求的JS封装函数

    每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式,    get/post 'url' : 提交地址, ...

  9. ajax正确的简单封装“姿势”

    window.meng = window.meng || {}; (function ($) { function getAjaxDate(url, apikey) { var datas; $.aj ...

随机推荐

  1. 201521123106《java程序设计》第一周学习总结

    1.本章学习总结 认识了java语言,了解了java的历史,学习了各种java相关文件的使用,能够进行基本的程序操作,学会了使用博客.码云. 2.书面作业 1.为什么java程序可以跨平台运行?执行j ...

  2. JAVA课程设计+购物车 个人博客

    1. 团队课程设计博客链接 2.个人负责模块或任务说明 将数据库中已经存在的商品取出,用表格显示到页面中. 实现在商品页面的购买,直接弹出消息框,输出价格,实现购买. 实现在商品页面进行添加购物车,并 ...

  3. 201521123009 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 Q1:互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问 ...

  4. JAVA课程设计+五子棋(个人博客)

    1.团队博客地址: http://www.cnblogs.com/yzb123/p/7063424.html 2.个人负责模块或任务说明 游戏初始化,清除棋盘上的棋子 鼠标监听器 棋子落棋 判断胜负 ...

  5. 三分钟深入TT猫之故障转移

    结束了一周繁忙的工作,趁着周末,小编手中的键盘早已饥渴难耐了,想知道上期省略号中发生了什么有趣的故事么?且听小编娓娓道来,结尾有彩蛋. 目录 风月前场 梦回现实 模拟老鸨 会话机制 故障转移 总结 风 ...

  6. SpringMVC第一篇【介绍、入门、工作流程、控制器】

    什么是SpringMVC? SpringMVC是Spring家族的一员,Spring是将现在开发中流行的组件进行组合而成的一个框架!它用在基于MVC的表现层开发,类似于struts2框架 为什么要使用 ...

  7. String ua = request.getHeader("user-agent")---ua值为null

    最近在修改错误日志,发现总报空指针,追踪代码发现这个ua的值有时候会为null,上网查了半天也无果,按常理说ua的值不可能为null,俩小时没找到原因,只是将ua判null了一下,记录一下,如果有大虾 ...

  8. Elipse中发布一个Maven项目到Tomcat

    对于maven初学者的我,经常遇到一个问题就是,maven项目创建成功后,本来已经添加了jar的依赖,但是发布到Tomcat中就是没有jar包存在, 启动Tomcat总是报没有找到jar包,可项目结构 ...

  9. Hadoop面试题目

    1.Hadoop集群可以运行的3个模式? 单机(本地)模式 伪分布式模式 全分布式模式 2.  单机(本地)模式中的注意点? 在单机模式(standalone)中不会存在守护进程,所有东西都运行在一个 ...

  10. Unitty 3D 贪吃蛇 今日小记 -- 碰撞

    当蛇头碰撞到蛋的时候  应该让蛋消失并且重新创建蛋. void OnTriggerEnter    可以使用这个方法 下面附有这个方法的介绍 其次需要对挂载在之上的Object  check IsTr ...