針對jquery的ajax中的參數理解

来源:https://www.cnblogs.com/webdragon/archive/2018/09/24/9695056.html
-Advertisement-
Play Games

1. url 發送請求的地址。為空表示當前頁。 1 $.ajax({ 2 type: "post", 3 data: studentInfo, 4 contentType: "application/json", 5 url: "/Home/Submit",//請求的介面 6 beforeSend: ...


1. url

發送請求的地址。為空表示當前頁。 

 1 $.ajax({
 2     type: "post",
 3     data: studentInfo,
 4     contentType: "application/json",
 5     url: "/Home/Submit",//請求的介面
 6     beforeSend: function () {
 7         // 禁用按鈕防止重覆提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "Success") {
12             //清空輸入框
13             clearBox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeAttr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responseText);
21     }
22 });
View Code

2. type

請求方式,get或post或put或delete。預設為get。put和delte不是得到所有的瀏覽器支持。

 1 $.ajax({
 2     type: "post",//請求的方式
 3     data: studentInfo,
 4     contentType: "application/json",
 5     url: "/Home/Submit",
 6     beforeSend: function () {
 7         // 禁用按鈕防止重覆提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "Success") {
12             //清空輸入框
13             clearBox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeAttr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responseText);
21     }
22 });
View Code

3. dataType

預期伺服器返回的數據類型。若沒指定,則自動根據http包中的mime信息來判斷。可用值為xml,html,script,json,jsonp,text。

 1 $.ajax({
 2           url: "/count/storage/data?callback=storageSurvey",
 3           dataType: "json",  //指定伺服器返回的數據類型為json
 4           type: "GET", 
 5           async:true,  
 6           jsonp: "callback", ///指定參數名稱,預設為callback  
 7           jsonpCallback:"storageSurvey", //指定回調函數名稱
 8           success: function (data) {
 9                    storageSurvey_local(data);
10           },
11           error:function () {
12             alert("error");
13     }
14 }
View Code

4. async

預設為true,即請求為非同步請求,這也是ajax存在的意義。但同時也可以將這個參數設置為false,實現同步請求。(同步請求會鎖定瀏覽器,直到這個請求結束後才可以執行其他操作)

 1 $.ajax({
 2                     url: "/Handle/Do.aspx",
 3                     type: "post",
 4                     data: { id: '0' },
 5                     async:true,//預設非同步false,同步true。
 6                     dataType: "json",
 7                     success: function(msg) {
 8                         alert(msg);
 9                     },
10                     error: function(XMLHttpRequest, textStatus, errorThrown) {
11                         alert(XMLHttpRequest.status);
12                         alert(XMLHttpRequest.readyState);
13                         alert(textStatus);
14                     },
15                     complete: function(XMLHttpRequest, textStatus) {
16                         this; // 調用本次AJAX請求時傳遞的options參數
17                     }
18                 });
View Code 

5. headers

jQuery1.5添加。一個用於一起進行請求的額外的key/value對的map。這項需要在beforeSend方法被調用前設置,因為headers中的任意值都有肯那個在beforeSend方法中被覆蓋。

 1 通過beforeSend獲取Header信息
 2 $.ajax({
 3                     type: "GET",
 4                     url: "default.aspx",
 5                     beforeSend: function(request) {
 6                         request.setRequestHeader("token", "token");
 7                     },
 8                     success: function(result) {
 9                         alert(result);
10                     }
11                 });
12 
13 setting參數 headers 比如項目中請求介面需要傳token
14 $.ajax({
15     headers: {
16         Accept: "application/json; charset=utf-8",
17       Authorization: token
18     },
19     type: "get",
20     success: function (data) {
21     }
22 });
View Code

6. beforeSend (XHR)

這個方法是用來在發送請求前修改XMLHttpRequest對象的,若修改失敗返回false,則取消此次ajax請求.

 1 $.ajax({
 2     type: "post",
 3     data: studentInfo,
 4     contentType: "application/json",
 5     url: "/Home/Submit",
 6     beforeSend: function () {//請求前做的事
 7         // 禁用按鈕防止重覆提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "Success") {
12             //清空輸入框
13             clearBox();
14         }
15     },
16     complete: function () {
17         $("#submit").removeAttr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responseText);
21     }
22 });
View Code

7. cache

預設為true,設置為false即不緩存。(當datatype為script或jasonp時預設為fasle)

 1 $.ajax({
 2     type: "post",
 3     data: studentInfo,
 4     contentType: "application/json",
 5     url: "/Home/Submit",
 6     cache:true,//預設為true,false不清緩存。
 7     beforeSend: function () {
 8         // 禁用按鈕防止重覆提交
 9         $("#submit").attr({ disabled: "disabled" });
10     },
11     success: function (data) {
12         if (data == "Success") {
13             //清空輸入框
14             clearBox();
15         }
16     },
17     complete: function () {
18         $("#submit").removeAttr("disabled");
19     },
20     error: function (data) {
21         console.info("error: " + data.responseText);
22     }
23 });    
View Code

8. data

發送到伺服器的數據。必須為key/value格式。且自動轉換為query string,get請求會將字元串附加在url後。

View Code

9. traditional

設置為true,用傳統的方式來序列化數據。

View Code

10. timeout

設置請求超時時間,毫秒為單位。此設置會覆蓋全局設置,即所有ajax請求共用同一個超時時間。

$.ajax({   url:'', //請求的URL   timeout : 1000, //超時時間設置,單位毫秒   type : 'get', //請求方式,get或post   data :{}, //請求所傳參數,json格式    dataType:'json',//返回的數據格式    success:function(data){ //請求成功的回調函數      alert("成功");   },   complete : function(XMLHttpRequest,status){ //請求完成後最終執行參數      if(status=='timeout'){//超時,status還有success,error等值的情況        ajaxTimeoutTest.abort();       alert("超時");     }   }  });

11.contentType

它是發送到伺服器的額數據的內容編碼類型,它的預設值是"appliction/x-www-form-urlencoded"。傳遞的伺服器的數據通常以UTF-8編碼。

View Code

12. success(data,textStatus,XHR)

請求成功後的回調函數。參數由伺服器返回,並會根據datatype參數進行參數處理。

 1 $.ajax({
 2   url:'', //請求的URL
 3   type : 'get', //請求方式,get或post
 4   data :{}, //請求所傳參數,json格式
 5    dataType:'json',//返回的數據格式
 6    success:function(data){ //請求成功的回調函數
 7      alert("成功");
 8   },
 9    error: function (data) {
10           console.info("error: " + data.responseText);
11    },
12   complete : function(XMLHttpRequest,status){ //請求完成後最終執行參數
13      if(status=='timeout'){//超時,status還有success,error等值的情況
14        ajaxTimeoutTest.abort();
15       alert("超時");
16     }
17   }
18  });
View Code

13. error (XHR,textStatus,errorThrown)

當請求失敗時調用這個方法。textStatus為錯誤信息,可用值為error,timeout,abort,parsererror。errorThrown為可選的要捕獲的異常對象。

$.ajax({   url:''//請求的URL   type : 'get'//請求方式,get或post   data :{}, //請求所傳參數,json格式    dataType:'json',//返回的數據格式    success:function(data){ //請求成功的回調函數      alert("成功");   },    error: function (data) {//錯誤的回調函數           console.info("error: " + data.responseText);    },   complete : function(XMLHttpRequest,status){ //請求完成後最終執行參數      if(status=='timeout'){//超時,status還有success,error等值的情況        ajaxTimeoutTest.abort();       alert("超時");     }   }  });

14. complete(jqXHR,textStatus)

請求完成後的回調函數,無論成功與否。textStatus為一個描述請求類型的字元串,它可以有以下值success,notmodified,error,timeout,abort,parsererror。

 1 $.ajax({
 2     type: "post",
 3     data: studentInfo,
 4     contentType: "application/json",
 5     url: "/Home/Submit",
 6     beforeSend: function () {
 7         // 禁用按鈕防止重覆提交
 8         $("#submit").attr({ disabled: "disabled" });
 9     },
10     success: function (data) {
11         if (data == "Success") {
12             //清空輸入框
13             clearBox();
14         }
15     },
16     complete: function () {//請求之後執行的函數
17         $("#submit").removeAttr("disabled");
18     },
19     error: function (data) {
20         console.info("error: " + data.responseText);
21     }
22 });
View Code

15. contents

jQuery1.5添加。一個字元串或常規表達式的map,用來確定用何種方式處理jQuery的response。

 1 $.ajax({
 2         url: 'Home/Index',
 3         type: 'post',
 4         dataType: 'mytype',//自定義類型
 5         contents: {//當把一個自定義的dataType選項類型轉換為一個已知的類型的時候需要使用contents參數
 6             mytype: /mytype/
 7         },
 8         converters: {
 9             'text mycustomtype': true,
10             'mycustomtype json': function () {
11                 console.log('converters')
12             }
13         }
14     })
View Code

16. context

用來設置ajax回調函數的上下文。讓回調函數中的this指向這個對象。

1 $.ajax({
2         url: "url",
3         context: document.body
4     }).done(function() {                
5          $(this).addClass( "done" );        
6 });
7 this是documnet.body 
8 context參數作用 將回調里的this替換為context里對應的值。
View Code

17. converters

jQuery1.5添加。一組數據類型到數據類型的轉換。每一個轉換值都是一個返回了response轉換後的值的方法。

18. crossDomain

false表示同一域請求,true表示跨域請求。它可以使伺服器端重定向到另外一個域。

19. dataFilter (data,type)

將ajax的返回值進行預處理的函數,data為返回值,teype為傳遞的datatype參數。

20. global

預設為true,觸發全局ajax事件。設置為false可以用來不觸發。可以用來控制不同的ajax事件。

21. ifModified

預設為false,僅在伺服器數據改變時獲取數據,使用http包中的Last-Modified頭信息判斷。

22. isLocal

jQuery1.5.1添加。允許將當前環境識別為local,jquery預設是不會識別的。file,*-extension 和widget協議可以被識別為local。如果isLocal需要被修改,推薦使用$.ajaxSetup()方法。

23. jsonp

要求為String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。

 1       $.ajax({
 2           url: "/count/storage/data?callback=storageSurvey",
 3           dataType: "jsonp",  //指定伺服器返回的數據類型為jsonp  通常指的是跨域
 4           type: "GET", 
 5           async:true,  
 6           jsonp: "callback", ///指定參數名稱,預設為callback  
 7           jsonpCallback:"storageSurvey", //指定回調函數名稱
 8           success: function (data) {
 9                    storageSurvey_local(data);
10           },
11           error:function () {
12             alert("error");
13     }
View Code

24. jsonpCallback

為jsonp請求指定一個回調函數名。jquery會自動生成隨機函數名,用這個值可以修改此名。

 1 $.ajax({
 2  9             type : "get",
 3 10             async:false,
 4 11             url : "ajax.ashx",
 5 12             dataType : "jsonp",
 6 13             jsonp: "callbackparam",//傳遞給請求處理程式或頁面的,用以獲得jsonp回調函數名的參數名(預設為:callback)
 7 14             jsonpCallback:"success_jsonpCallback",//自定義的jsonp回調函數名稱,預設為jQuery自動生成的隨機函數名
 8 15             success : function(json){
 9 16                 alert(json);
10 17                 alert(json[0].name);
11 18             },
12 19             error:function(){
13 20                 alert('fail');
14 21             }
15 22         });
View Code

25. mimetype

jQuery1.5.1添加。可以用來覆蓋XHR中的mimetype。

26. password

要求為String類型的參數,用於響應HTTP訪問認證請求的密碼。

27. processData

要求為Boolean類型的參數,預設為true。預設情況下,發送的數據將被轉換為對象(從技術角度來講並非字元串)以配合預設內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息,請設置為false。

28. scriptCharset

只有當請求為jsonp或script,並且type為get時才會用於強制修改charset。

 1 $.ajax({ 
 2       url: testUrl, 
 3       dataType: 'jsonp', 
 4       type: 'post', 
 5       scriptCharset: 'utf-8'
 6     });
 7 使用scriptCharset即可解決問題,用contentType就不一定可以了。
 8 
 9 上面的解決方案是最完美的,另外網上的一般解決方式吧,是用contentType來處理的。
10 
11 $.ajax({ 
12 url: "ajax.aspx?a=memberlogin", 
13 type: "post", 
14 dataType: "json", 
15 contentType: "application/x-www-form-urlencoded; charset=utf-8", 
16 success: callback
17     });
View Code

29. statusCode

jQuery1.5添加。用來定義http的返回碼對應的處理函數。下麵的例子定義了返回404後的處理方法。

1  $.ajax({ 
2    statusCode: { 
3    404: function() { 
4    alert("page not found"); 
5    } 
6    } 
7 }); 
View Code

30.username

用於響應http訪問認證要求為String類型的參數,用於響應HTTP訪問認證請求的用戶名。

31. xhr

預設在ie下是ActiveXObject而其他瀏覽器是XMLHttpRequest。用於重寫或提供一個增強的XMLHttpRequest對象。

32. xhrFields

jQuery1.5.1添加。它可以添加到原生xhr對象上的key/value對。舉個例子,你可以通過它來設置跨域的withCredentials為true。

1 $.ajax({   
2     url: a_cross_domain_url,   
3     xhrFields: {   
4     withCredentials: true   
5     }   
6 });  
7 支持withCredentials屬性的瀏覽器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持
8 在jQuery1.5中,withCredentials這個屬性不在原生的xhr中,所以這個請求會被忽略到。若要測試這個例子,需要使用jQuery1.5.1。
View Code

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 旭日Follow_24 的CSDN 博客 ,全文地址請點擊: https://mp.csdn.net/postedit/80910082 索引概念: 索引是關係資料庫中用於存放每一條記錄的一種對象,主要目的是加快數據的讀取速度和完整性檢查。建立索引是一項技術性要求高的工作。一般在資料庫設計階段的與數 ...
  • Android中的構架模式一直是一個很hot的topic, 近年來Architecture components推出之後, MVVM異軍突起, 風頭正在逐漸蓋過之前的MVP. 其實我覺得MVP還是有好處的, 比如靈活多變(其實只是我用起來更熟悉順手一些吧). 個人是沒有什麼偏見的, 關於項目的構架,... ...
  • 線性佈局線性佈局LinearLayout是最常用的佈局,顧名思義,它下麵的子視圖像是用一根線串了起來,所以其內部視圖的排列是有順序的,要麼從上到下垂直排列,要麼從左到右水平排列。排列順序只能指定一維方向的視圖次序,可是手機屏幕是個二維的平面,這意味著還剩另一維方向需要指定視圖的對齊方式。故而線性佈局 ...
  • 開篇呢,先給大家問個好,今天是中秋節,祝大家中秋節快樂!!雖然是中秋節,但是木有回家還是總結一下知識點寫寫博客吧,想著昨天總結一下的,但是昨天和幾個同學小聚了一下,酒逢知己總是千杯少呢,喝的微醺不適合寫東西,所以就留到今天總結了。因為這段時間在工作中陸陸續續的接觸到了一些RN開發的東西,還是需要總結 ...
  • Cookie和Session在Node.JS中的實踐(二) cookie篇在作者的上一篇文章 "Cookie和Session在Node.JS中的實踐(一)" 已經是寫得算是比較詳細了,有興趣可以翻看,這篇是session篇,重點在討論seesion的特性、概念,以及session和cookie的區別 ...
  • Cookie和Session在Node.JS中的實踐(一) Cookie和Session是一個非常有趣的概念,也是一個老生常談的話題。然而,作者看了許多文章,也翻看了幾本書籍,它們對Cookie和Session的概念、機制的描述都各不一致,大多文章都只談到了Cookie和Session其中之一,但在 ...
  • React作為受歡迎的前端框架之一,大多數人只會用而不理解其原理,本系列屬於筆記,來源於深入React技術棧,並會適時加入補充內容,以便讀者能理解React底層實現,包括virtual DOM機制、生命周期等。 ...
  • 對於前端程式員來說閉包還是比較難以理解的, 閉包的形成與變數的作用域以及變數的生產周期密切相關,所以要先弄懂變數的作用域和生存周期。 1.變數作用域 變數的作用域,就是指變數的有效範圍,通常我們指的作用域就是函數作用域(畢竟全局的作用域沒有要指的意義,關鍵哪都能訪問) 聲明變數的時候推薦使用es6語 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...