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

拼搏现实的明天。 2022-03-27 05:50 1545阅读 0赞

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

#### 前言 ####

> 通过 jQuery 提供的 ajaxSetup 方法，我们可以拦截页面上所有的 Ajax 请求响应（包括  . a j a x 、 .ajax、 .ajax、.post、$.get）。这样我们可以对这些 Ajax 请求响应做统一的处理。比如判断 sesion 是否失效，失效的话就跳转到登录页。下面通过几个样例进行演示。  
> 原文出自：[www.hangge.com][]  
> 转载请保留原文链接：[http://www.hangge.com/blog/cache/detail\_1412.html][http_www.hangge.com_blog_cache_detail_1412.html]

## 一、统一处理返回结果 ##

1.  后台返回数据样例
    
    比如后台返回如下格式的 JSON 数据，包括正常情况和异常情况。

//正常数据返回
        { "state":1, "msg":"", "data":"欢迎访问hangge.com"}
         
        //session超时数据返回
        { "state":-1, "msg":"session超时，请重新登录！"}
         
        //异常情况数据返回
        { "state":0, "msg":"服务器繁忙，请稍后再试。"}

1.  前台处理样例

//全局的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');
         }
       }
    });

[www.hangge.com]: http://www.hangge.com
[http_www.hangge.com_blog_cache_detail_1412.html]: http://www.hangge.com/blog/cache/detail_1412.html