JavaScript如何設置AJAX的全局默認設置

本篇內容介紹了“JavaScript如何設置AJAX的全局默認設置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

前言

$.ajaxSetup方法用于設置AJAX的全局默認設置。之后執行的所有AJAX請求，如果對應的選項參數沒有設置，將使用更改后的默認設置。這方便我們設置error 統一返回樣式。

示例

設置全局默認

 // 設置AJAX的全局默認選項
 $.ajaxSetup( {  
    url: "/login" , // 默認URL  
    aysnc: true , // 異步加載  
    type: "POST" , // 默認使用POST方式
    contentType: "application/json",
    data:{
       "name":"yo yo"  //默認添加額外參數
    },
    headers: { // 默認添加請求頭  
        "Authorization": "Bearer xxxxtokenxxx" ,  
    } ,  
    error: function(jqXHR, textStatus, errorMsg){ // 出錯時默認的處理函數  
        // jqXHR 是經過jQuery封裝的XMLHttpRequest對象  
        // textStatus 可能為： null、"timeout"、"error"、"abort"或"parsererror"  
        // errorMsg 可能為： "Not Found"、"Internal Server Error"等  
        console.log( '操作異常：' +  errorMsg );          
    }  
});

ajax發一個請求，參數都不傳

// ajax請求, 什么也不傳，拿默認設置
$.ajax();

此時會用默認的配置發post請求，訪問/login 地址

可以傳url和type 參數改變默認值

$.ajax({
    url: "/demo" , // 設置參數改變默認值
    type: "GET" , 
});

Authorization 認證

如果每個請求都需要傳Authorization 頭部參數，可以設置全局配置

     // 設置AJAX的全局默認選項
 $.ajaxSetup( {  
    headers: { // 默認添加請求頭  
        "Authorization": "Bearer xxxxtokenxxx" ,  
    } ,  
    error: function(jqXHR, textStatus, errorMsg){ // 出錯時默認的處理函數  
        // jqXHR 是經過jQuery封裝的XMLHttpRequest對象  
        // textStatus 可能為： null、"timeout"、"error"、"abort"或"parsererror"  
        // errorMsg 可能為： "Not Found"、"Internal Server Error"等  
        console.log( '操作異常：' +  errorMsg );          
    }  
}); 


// ajax請求
$.ajax({
    url: "/demo", // 設置參數改變默認值
    type: "POST", 
    data: JSON.stringify({
        user: 'test'
    }),
    contentType: "application/json",
});

后面所有的ajax請求都會帶上請求頭部"Authorization": "Bearer xxxxtokenxxx"

POST http://127.0.0.1:5500/demo HTTP/1.1

Connection: keep-alive
Authorization: Bearer xxxxtokenxxx
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Content-Type: application/json
Accept: */*
X-Requested-With: XMLHttpRequest


{"user":"test"}

“JavaScript如何設置AJAX的全局默認設置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！