封装的意义在于复用,在于减少重复的代码。

我在项目中做了简单的Ajax请求封装,实现方式如下:

 //封装Ajax请求
$.extend({
ajaxDirect:function(url,type,data,success,error){
if(type.toLowerCase()=='post'){
data = pack(data)
}
$.ajax({
type: type,
url: base + url,
contentType:'application/json',
data:data,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
},
success: function(data){
success(data)
},
error: function(data){
error(data)
},
dataType: "json"
})
}
})

其中的要点为:

1.使用jQ的$.extend函数,则调用时只需用$.ajaxDirect(url,type,data,function(){},function(){})即可,若data无值,则传空对象过来。

2.pack为JSON.stringify的封装,即

 //对象序列化
function pack(data) {
return JSON.stringify(data)
} function unpack(data) {
return JSON.parse(data)
}

3.该项目在请求时需要传token,则我在请求时在请求头部统一加上了token,即

 beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
}

4.base为请求的统一前缀,为公共变量,可自定义值。

调用示例:

GET请求

 $.ajaxDirect("/user/info",'GET',{},
function (data) {
//发送成功
},
function (data) {
//发送失败
}
)

POST请求

 1 var data = {
2 password:$('.newPwd').val()
3 }
4
5 $.ajaxDirect("/farmer/farmeruser/changePassword",'POST',data,
6 function(data){
7 //发送成功
8 },
9 function(data){
10 //发送失败
11 }
12 )

在这个基础上,我们可以进一步完善封装的Ajax。

//封装Ajax请求
$.extend({
ajaxDirect:function(url,type,data,success,error,requestType){
if(requestType!=='pic'&&type.toLowerCase()=='post'){
data = pack(data)
}
var request = {
type: type,
url: base + url,
contentType:'application/json',
data:data,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("X-Token", sessionStorage.token)
},
success: function(data){
//token过期
if(data.message==="token过期"){
$.ajax(
{
type: 'POST',
url: base+'/refleshToken',
contentType:'application/json',
data:pack({
token:sessionStorage.token
}),
success: function(data){
console.log(data)
sessionStorage.token = data.data.token
location.reload()
},
error: function(){
$.toast("发送失败", "text")
},
dataType: "json"
})
}else{
success(data)
}
},
error: function(data){
error(data)
},
dataType: "json"
}
if(requestType==='pic'){
request.cache = false
request.processData = false
request.contentType = false
} if(requestType==='login'){
request.beforeSend = false
}
$.ajax(request)
}
})

上面的代码相比第一段代码增加的功能有:

1.增加了POST的大小写适配

2.增加了token过期后统一请求新的token的接口

3.增加了参数requestType,可传可不传,用于区分请求的类型,从而设置请求头的参数。

jQuery-实现简单的Ajax请求封装的更多相关文章

  1. 利用JQUERY实现多个AJAX请求等待

    利用JQUERY实现多个AJAX请求等待 li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list- ...

  2. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  3. jQuery实现多个ajax请求等待

    通常,jQuery的函数ajax进行Ajax调用.函数ajax只能做一个Ajax调用.当Ajax调用成功时,执行回调函数.可选地,当Ajax调用返回错误时,调用另一个回调函数.但是,该功能不能根据这些 ...

  4. 使用 jQuery Mockjax 插件模拟 Ajax 请求

    在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据: $.ajax({ url: '/products/' }).done(f ...

  5. MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

  6. Python - Django - jQuery 实现简单的 AJAX

    AJAX 局部刷新实例: 使用 jQuery 实现基本的发送 AJAX 请求 index.html: <!DOCTYPE html> <html lang="en" ...

  7. Django(十二)视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  8. <day001>存储到Mysql、mongoDB数据库+简单的Ajax请求+os模块+进程池+MD5

    任务1:记住如何存储到Mysql.mongoDB数据库 ''' 存储到Mysql ''' import pymysql.cursors class QuotePipeline(object): def ...

  9. 封装一个简单的ajax请求

    记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...

随机推荐

  1. [从今天开始修炼数据结构]图的最小生成树 —— 最清楚易懂的Prim算法和kruskal算法讲解和实现

    接上文,研究了一下算法之后,发现大话数据结构的代码风格更适合与前文中邻接矩阵的定义相关联,所以硬着头皮把大话中的最小生成树用自己的话整理了一下,希望大家能够看懂. 一.最小生成树 1,问题 最小生成树 ...

  2. 【hibernate】映射继承关系

    [hibernate]映射继承关系 转载:https://www.cnblogs.com/yangchongxing/p/10405151.html ========================= ...

  3. Django之models模块

    一.字段 1. AutoField(Field) int自增列,必须填入参数 primary_key=True 2.BigAutoField(AutoField) bigint自增列,必须填入参数 p ...

  4. Spring Cloud第九篇 | 分布式服务跟踪Sleuth

    ​ ​本文是Spring Cloud专栏的第九篇文章,了解前八篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...

  5. 微信小程序 wepy框架 之拦截器intercepter使用

    1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...

  6. MVC模式与Servlet执行流程

    ##Servlet生命周期 五个部分,从加载到卸载,如同人类的出生到死亡 加载:Servlet容器自动处理 初始化:init方法 该方法会在Servlet被加载并实例化后执行 服务:service抽象 ...

  7. 在Docker中跑Hadoop与镜像制作

      重复造轮子,这里使用重新打包生成一个基于Docker的Hadoop镜像:   Hadoop集群依赖的软件分别为:jdk.ssh等,所以只要这两项还有Hadoop相关打包进镜像中去即可: 配置文件准 ...

  8. Mysql服务彪高排查方式及索引的正确使用步骤

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/12af580d-1 ...

  9. OurEDA慕课网开发记录

    项目说明 OurEDA实验室每年都会面向大一新生招人,每周的沙龙都会有学长来讲课,传经验,录下来的沙龙视频就非常有价值,因此,在老师的安排下,我负责开发了慕课网这样一个项目. 首要问题及其解决方案 视 ...

  10. 解决 Windows Docker 安装 Gitlab Volume 权限问题

    本文首发于我的个人博客,解决 Windows Docker 安装 Gitlab Volume 权限问题 ,欢迎访问! 记录一下 Windows10 下 Docker 安装 Gitlab 的步骤. Ca ...