jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态码 )

样例代码:

  

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
    <script>
      //全局的ajax访问,处理ajax清求时session超时
      $.ajaxSetup({
         contentType:"application/x-www-form-urlencoded;charset=utf-8",
         complete:function(XMLHttpRequest,textStatus){
             //通过XMLHttpRequest取得响应头,sessionstatus,
             var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus");
             if(sessionstatus=="timeout"){
                 //如果超时就处理 ,指定要跳转的页面(比如登陆页)
                 window.location.replace("/login/index.php");
             }
          }
       });

      //获取数据
      function getContent() {
        $.get("content.php", function (data){
                alert(data);
        });
      }

      //登录或注销
      function login(value) {
        $.get("login.php",{"login":value} , function (data){
                alert(data);
        });
      }
    </script>
  </head>
  <body>
    <button onclick="getContent()">获取数据</button>
    <button onclick="login(true)">登录</button>
    <button onclick="login(false)">注销</button>
  </body>
</html>

 

一、统一处理返回结果

我们可以将超时或是其他异常情况放置在返回结果中,前台统一解析结果来进行各种异常处理。

1,后台返回数据样例

比如后台返回如下格式的 JSON 数据,包括正常情况和异常情况。

//正常数据返回
{"state":1, "msg":"", "data":"欢迎访问hangge.com"}

//session超时数据返回
{"state":-1, "msg":"session超时,请重新登录!"}

//异常情况数据返回
{"state":0, "msg":"服务器繁忙,请稍后再试。"}

  

2,前台处理样例

 

//全局的ajax访问,处理ajax清求时异常
$.ajaxSetup({
   contentType:"application/x-www-form-urlencoded;charset=utf-8",
   complete:function(XMLHttpRequest,textStatus){
      //通过XMLHttpRequest取得响应结果
      var res = XMLHttpRequest.responseText;
      try{
        var jsonData = JSON.parse(res);
        if(jsonData.state == -1){
          //如果超时就处理 ,指定要跳转的页面(比如登陆页)
          alert(jsonData.msg);
          window.location.replace("/login/index.php");
        }else if(jsonData.state == 0){
          //其他的异常情况,给个提示。
          alert(jsonData.msg);
        }else{
          //正常情况就不统一处理了
        }
      }catch(e){
      }
    }
 });

//获取数据
function getContent() {
  $.get("content.php", function (data){
      var jsonData = JSON.parse(data);
      //只处理正常的情况
      if(jsonData.state == 1){
        alert(jsonData.data);
      }
   });
}

  

三、统一处理异常的HTTP状态码

我们还可以通过 Ajax 拦截,根据异常的 HTTP 状态码(404、500等)统一处理各种请求错误、服务器错误等情况。

$.ajaxSetup({

   contentType:"application/x-www-form-urlencoded;charset=utf-8",

   complete:function(XMLHttpRequest,textStatus){

   },

   statusCode: {

     404: function() {

         alert(‘数据获取/输入失败,没有此服务。404‘);

     },

     504: function() {

         alert(‘数据获取/输入失败,服务器没有响应。504‘);

     },

     500: function() {

         alert(‘服务器有误。500‘);

     }

   }

});

原文地址:https://www.cnblogs.com/flyingDragon/p/11956096.html

时间: 2024-09-28 23:44:26

jQuery - 拦截所有Ajax请求(统一处理超时、返回结果、错误状态码 )的相关文章

Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求

Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断请求是不是ajax请求,Java判断是否为ajax请求 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年8月10日 http://www.cnblogs.com/

jquery跨域Ajax请求

sonp原理: 首先在客户端注册一个callback, 然后把callback的名字传给服务器. 此时,服务器先生成 json 数据.然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端. 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定

jquery中的ajax请求用法以及参数详情

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解

一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用给优化HTML文档操作.事件处理.动画设计和Ajax交互提供了巨大的便利.而且,其特有的链式语法也较与JS更为清晰. 二.JQuery入门 想要使用JQuery框架,就必须在html文档中导入JQuery插件,导入方式和日常导入外部JS文件的方式是相同的.但要注意,在同一html文档中插入多个外部J

浅谈jquery中的ajax请求和跨域请求

ajax请求数据的代码: $(function () { $.ajax({ url:url,//请求文件所在的url type:"get",//请求的方式 success:function (data) { console.log(data);//返回的数据 } })})这样请求来的数据一般情况下都可以使用,但是有时候在从这个域名到另外一个域名请求数据时往往会出现所谓的跨域请求问题, 浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在协议.域名.端口均相同才能被访问

原生与jQuery封装的ajax请求数据及状态码

原生Ajax 请求数据 btn.addEventListener('click',function(){ if(window.XMLHttpRequest){ var xhr = new window.XMLHttpRequest(); }else{ //兼容IE浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //请求方式get/post //请求URL //ture 异步请求:false 同步请求 xhr.open('get','

Jquery监听AJAX请求

.ajaxComplete() 当Ajax请求完成后注册一个回调函数.这是一个 AjaxEvent. .ajaxError() Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event. .ajaxSend() 在Ajax请求发送之前绑定一个要执行的函数,这是一个 Ajax Event. .ajaxStart() 在AJAX 请求刚开始时执行一个处理函数. 这是一个 Ajax Event. .ajaxStop() 在AJAX 请求完成时执行一个处理函数. 这是一个 Ajax Eve

springboot+shiro 02 - 异步ajax请求无权限时,返回json格式数据

博客: https://www.cnblogs.com/youxiu326/p/shiro-01.html github:https://github.com/youxiu326/sb_shiro_session.git 在原有基础上添加 SimpleFormAuthenticationFilter /** * 自定义过滤器,ajax请求数据 以json格式返回 * Created by lihui on 2019/2/28. */ public class SimpleFormAuthenti

AJAX请求状态和服务器返回状态详解

xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头). 3:请求在处理中:通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成. 4:响应已完成:您可以获取并使用服务器的响应了. xmlhttp.status的值及解释: 100--客户必须继续发出请求 101--客户要求服务器根据请求转换HTTP协议版本 200--交易