jQuery - 攔截全部Ajax請求（統一處理超時、返回結果、錯誤狀態碼）

時間 2019-11-29

標籤 jquery 攔截全部 ajax 請求統一處理超時返回結果錯誤狀態欄目 JQuery 简体版

原文原文鏈接

樣例代碼：

<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、統一處理返回結果

咱們能夠將超時或是其餘異常狀況放置在返回結果中，前臺統一解析結果來進行各類異常處理。javascript

1，後臺返回數據樣例

好比後臺返回以下格式的 JSON 數據，包括正常狀況和異常狀況。php

//正常數據返回
{"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);
      }
   });
}