借助ajaxPrefilter ajax预处理函数实现ajax拦截器

最新推荐文章于 2022-11-20 17:49:22 发布
最新推荐文章于 2022-11-20 17:49:22 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： HTML5 文章标签： jquery xmlhttprequest ajaxPrefilter ajaxSetup ajax拦截器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjd6568358/article/details/72782148
版权

最近在用requireJS+jquery重构PC官网，原来的代码太冗余，很多方法和变量都重复定义，也没有全局配置的地方。习惯了模块化开发和全局配置的我简直不能忍。

原来的代码每次发ajax请求都需要手动序列化JS对象，添加时间戳/token，觉得太麻烦。于是想实现一个ajax的拦截器，能够自动帮我们处理这些。

网上找到了一个hookAjax的库，原理类似于修改原生xmlhttprequest对象。为了一个拦截器下载一个库觉得不太至于，翻了一遍jquery的API发现了ajaxPrefilter这个API大致满足我的要求。

闲话不多说，上代码:


搭配ajaxSetup这个API使用效果更佳



ajaxPrefilter 中文文档:http://www.css88.com/jqapi-1.9/jQuery.ajaxPrefilter/

爱吃兔子的小萝卜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口
cjd6568358的专栏
07-10 3万+
今天给大家介绍的是在前后端分离的趋势下，前端同学们利用nginx来开发和调试自己的前端项目。 换做以前，大家正常的前端调试流程可能是这样的。 1、首先搭建好后台的语言环境 2、把后台代码拉到本机 3、通过启动 tomcat或者是apache。 4、打开网页正常调试 这样的好处是整个流程每个人很熟悉，没什么坑。接口调试不通那就找后台吧。 坏处是 1、前端同学需要熟悉基本的后台程序运行
单页应用（SPA）前端javascript如何阻止按下返回键页面回退
cjd6568358的专栏
04-11 7480
这几年单页应用很流行，利用html5新特性history.pushState/replaceState 可以操作URL无刷新动态加载html内容，达到比较好的用户体验。 不过经常会遇到这样一个问题，那就是用户总是习惯于按返回键来返回上一页，移动端页面有弹框的时候，用户期望按下返回键来关闭弹框，这时候却发现返回到了上一页。。。其中的技术原理我们前端同学都知道，不过用户不理解啊，你也没办法解释给他们
Ajax拦截器的实现
垂死病中惊坐起，菜鸟竟是我自己，于是含泪写下博客
05-29 4384
使用原生ajax与jQuery ajax实现拦截器的原理与方法
SpringMVC--Ajax和拦截器
小龙要努力
04-12 149
SpringMVC--Ajax、拦截器、文件上传和下载
一个简单的呼吸灯效果
tinfengyee的博客
12-14 1244
一个简单的呼吸灯效果 图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
【jQuery】ajax请求的全局拦截器
weixin_46472377的博客
05-12 3392
全局开始回调信息 $(document).ajaxStart(function(res){ //开始回调信息 }); 全局开始发送消息 $(document).ajaxSend(function(){ alert("2") }); 全局成功返回 $.ajax() $(document).ajaxSuccess(function(){ alert("3") }); 在请求已从服务器返回之后，并且响应包含失败状态码 $(document).ajaxErro.
Ajax-axios拦截器
weixin_46669844的博客
11-20 629
Ajax-axios拦截器常用处理
解决拦截器对ajax请求的拦截实例详解
01-21
解决拦截器对ajax请求的的拦截 拦截器配置： public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception { //获取判定登陆的session是否存在 String ...
ajax 拦截器
02-20
ajax 拦截器
springmvc实现登录注册，拦截器的使用，ajax的验重练习demo代码演示
最新发布
03-05
关于springmvc的测试，登录注册，ajax的验重，用户名不对和成功登录测试，拦截器的使用，使用springmvc框架的练习
vue ajax 拦截原理与实现方法示例
10-15
主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
vue使用axios记录
qq_44161722的博客
09-01 716
3、在package.json 文件夹找到scripts 利用 --mode 来分配我们项目跑起来的指令分别对应的是生产模式开发模式。1、在package.json同级目录下新建 .env.production 生产模式和 .env.development 开发模式。这里面其中的 VUE_APP_ 这个是项目固定写死的，不可更改，其后面的名称可以自己随便取，在这里我取的名字为 BASE_URL。1、在 src 目录下新建 utils 目录，然后新建request.js文件；在home.js中修改请求。
ajax请求拦截器
03-15
struts2在struts2.xml里配置拦截器可以过滤到指定的url的请求，但是对于ajax的请求确是过滤不了，比如说sesion超时或某些页面有权限控制的，通过ajax的请求时系统会报错最近在解决此类问题时碰上了找了不少资料，最后终于找到解决方法，我们可以通过在前台调用ajax_filter.js实现，当然后台也需要相应的代码对应才能实现。
ajax添加header整理
02-16
ajax添加header整理
vue系列之requireJs中引入vue-router的方法
12-11
requireJs简介 参数配置 requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。 require define 其中define是用于定义模块，而require是用于载入模块以及载入配置文件。 define([id,deps,] callback); require(deps[,callback]); 加载配置文件 独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式： [removed][removed] [removed][removed] 另
ajax实现响应拦截,在事件处理程序之前如何拦截jQuery中的ajax响应？
weixin_39618456的博客
08-06 328
我想为所有AJAX请求注册全局事件处理程序,以便在特定事件处理程序获取之前,我可以拦截和处理来自服务器的响应.例如,我的代码可能有以下的东西：$("#placeholder").load("/fragments/userpics");而且我想注册一个“before”事件处理程序,以便例如,如果返回401响应,我可以显示一个登录框,或者如果有503响应可能会重试.我认为$.ajaxError()是我...
angularJS实现无刷新文件下载
cjd6568358的专栏
10-23 9298
$scope.getExcel = function () { $http.post("/production/statistics/export", { storeId: $scope.$parent.currStore.storeId, date: $scope.$parent.ledgerDate.get
angular2.0 webpack css url 图片路径问题
cjd6568358的专栏
07-16 5834
基于angular 2.0 rc4 github上的一个种子项目二次开发 angular2-seed 需要修改的几个地方: webpack.config.js 增加以下配置项，需要注意的是必须先安装 node-sass、css-to-string-loader、sass-loader、url-loader footer.ts footer.scss
springboot实现通过拦截器拦截指定的ajax请求
04-12
好的，关于你的问题，您可以通过编写一个自定义拦截器来实现拦截指定的Ajax请求。在自定义拦截器中，您可以检查请求是否满足您的条件，如果不满足，则可以返回错误响应或者重定向到其他页面。具体步骤详见SpringBoot...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值