对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 ...
随机推荐
- 201521123071 《JAVA程序设计》第二周学习总结
1. 本周学习总结 在本周的学习中,主要学习了书上的String类以及Math类等知识,但是书上学到的东西只是理论,实际打起代码来的时候会学习到更多,比如在PTA上就有学习到StringBuilder ...
- java课程设计 猜数游戏 个人
1.团队课程设计博客链接 /http://www.cnblogs.com/ohanna/p/7064305.html 2.个人负责模块说明 1.进入界面: 2.成功玩家信息的录入: 3.信息的读出 3 ...
- JSP引入 - UEditor 富文本编辑器
UEditor JSP 因为是项目第一天就导入了,现在过去一个多星期了,可能会有问题 官网:http://ueditor.baidu.com/website/ 1. 解压对应的UEditor压缩包至 ...
- node.js的安装及配置
一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(6 ...
- java基础知识2--String,StringBufffer,StringBuilder的区别
String,StringBufffer,StringBuilder的区别 1.可变不可变方面 String类中使用字符数组保存字符串 ,final 修饰当然是不可变的,用String来操作字符串的 ...
- 在Myeclipse中用Java语言操作mysql数据库
package OperateMysql; import java.sql.*; public class MysqlTest { public static void main(String[] a ...
- mongodb 常用的命令
mongodb 常用的命令 对数据库的操作,以及登录 1 进入数据库 use admin 2 增加或修改密码 db.addUser('wsc', '123') 3查看用户列表 db.system.us ...
- oracle 例外
一.例外分类oracle将例外分为预定义例外.非预定义例外和自定义例外三种.1).预定义例外用于处理常见的oracle错误.2).非预定义例外用于处理预定义例外不能处理的例外.3).自定义例外用于处理 ...
- String的replace和replaceAll
replace(CharSequence target, CharSequence replacement) 这里CharSequence是一个接口 实现类包括CharBuffer, Segement ...
- ArrayListd的长度问题
namespace ArrayListd的长度问题{ class Program { static void Main(string[] args) { //需要的参数是object类型 //alt+ ...