首頁 > web前端 > js教程 > 主體

$.Ajax()方法的參數如何使用

php中世界最好的语言
發布: 2018-04-04 11:25:51
原創
2174 人瀏覽過

這次帶給大家$.Ajax()方法的參數如何使用,使用$.Ajax()方法的注意事項有哪些,下面就是實戰案例,一起來看一下。

先跟大家介紹下Ajax概念

AJAX即「Asynchronous Javascript And XML」(異步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML(標準通用標記語言的子集)。

AJAX 是一種用於建立快速動態網頁的技術。

透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。

ajax方法

$.ajax()方法是jQuery最底層的Ajax實作。它的結構為:

  $.ajax(options)

#該方法只有一個參數,但是這個物件裡包含了$.ajax()方法所需的請求設定以及回呼函數等訊息,參數以key/value的形式存在,所有的參數都是可選的。常用參數請見下表:

1.url

#要求String類型的參數,(預設為目前位址)發送請求的頁面。

2.type

要求為String類型的參數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅有部分瀏覽器支援。

3.timeout

要求為Number類型的參數,設定請求逾時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域設定。

4.async

要求為Boolean類型的參數,預設為true,所有請求均為非同步請求。如果需要同步請求,請將此選項設為false。注意,同步請求將鎖住瀏覽器,使用者其他操作必須等待請求完成才可執行。

5.cache

要求為Boolean類型的參數,預設為true(當dataType為Script時,預設為false),設定false將不會從瀏覽器快取中載入請求資訊。

6.data

要求為Object或String類型的參數,傳送到伺服器的資料。如果不是字串,將自動轉換為字串格式。 get請求中將附加在URL後。防止這種自動轉換,可以查看  processData選項。物件必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType

要求為String類型的參數,預期伺服器傳回的資料類型。如果不指定,jQuery將自動根據HTTP包的mine資訊傳回responseXML或responseText,並作為回呼函數參數傳遞。可用的類型如下:

  xml:返回XML文檔,可用jQuery處理。

  html:傳回純文字HTML資訊;包含的script標籤會在插入DOM時執行。

  script:傳回純文字javascript程式碼。不會自動快取結果,除非設定了cache參數。注意在遠端請求時(不在同一個網域下),所有post請求都會轉為get請求。

  json:傳回JSON資料。

  jsonp:JSON格式。使用JSONP形式呼叫函數時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函數名,以執行回調函數。

  text:傳回純文字字串。

8.beforeSend

要求為Function類型的參數,傳送請求前可以修改XMLHttpRequest物件的函數,例如新增自訂HTTP頭。在beforeSend中如果回傳false可以取消本次ajax請求。 XMLHttpRequest物件是唯一的參數。

function(XMLHttpRequest){
    this;//调用本次ajax请求时传递的options参数
  }
登入後複製

9.complete

#要求為Function類型的參數,請求完成後呼叫的回呼函數(請求成功或失敗均呼叫) 。參數:XMLHttpRequest物件和一個描述成功請求類型的字串。

  function(XMLHttpRequest,textStatus){
    this; //调用本次ajax请求时传递的options参数
  }
登入後複製

10.success

#要求為Function類型的參數,請求成功後呼叫的回呼函數,有兩個參數。

  (1)由伺服器傳回,並根據dataType參數進行處理後的資料。

  (2)描述狀態的字串。

  function(data,textStatus){
    //data可能是xmlDoc、jsonObj、html、text等
    this; //调用本次ajax请求时传递的options参数
  }
登入後複製

11.error

#要求為Function類型的參數,請求失敗時被呼叫的函數。此函數有3個參數,分別是XMLHttpRequest物件、錯誤訊息、捕獲的錯誤物件(可選)。 ajax事件函數如下:

  function(XMLHttpRequest,textStatus,errorThrown){
    //通常情况下textStatus和errorThrown只有其中一个包含信息
    this; //调用本次ajax请求时传递的options参数
  }
登入後複製

12.contentType

#要求為String類型的參數,當傳送訊息至伺服器時。內容編碼類型預設為"application/x-www-form-urlencoded"。此預設值適合大多數應用場合。

13.dataFilter

要求為Function類型的參數,給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。 data是Ajax傳回的原始數據,type是呼叫jQuery.ajax時提供的dataTYpe參數。函數傳回的值將由jQuery進一步處理。

  function(data,type){
    //返回处理后的数据
    return data;
  }
登入後複製

14.global

#要求為Boolean類型的參數,預設為true。表示是否觸發全域ajax事件。設定為false將不會觸發全域ajax事件,ajaxStart和ajaxStop可用於控制各種ajax事件。

15.ifModified

#要求為Boolean類型的參數,預設為false。僅在伺服器資料改變時取得新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。

16.jsonp

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

17.username

要求為String類型的參數,用於回應HTTP存取認證請求的使用者。

18.password

要求為String類型的參數,用於回應HTTP存取認證請求的密碼。

19.processData

#要求為Boolean類型的參數,預設為true。預設情況下,發送的資料將被轉換為物件(從技術角度來講而非字串)以配合預設內容類型"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或其他不希望轉換的訊息,請設定為false。

20.scriptCharset

要求為String類型的參數,只有當請求時dataType為"jsonp"或"script",且type是GET時才會用於強制修改字元集(charset)。通常在本地和遠端的內容編碼不同時使用。

案例代碼:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});
登入後複製

知識連結:

1、$.each()函數:$.each( )函數不同於jQuery物件的each()方法,它是一個全域函數,不操作jQuery物件。此函數接收兩個參數,第1個參數是一個陣列或對象,第2個參數是一個回呼函數。回呼函數有兩個參數:第1個參數為陣列的索引或物件的成員,第2個參數為對應的變數或內容。

  $.each(data,function(commentIndex,comment){
  //doSomething;
 })
登入後複製

2、ajaxStart()与ajaxStop():当Ajax请求开始时,会触发ajaxStart()方法的回调函数。当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。

有时候页面需要加载一些图片,可能速度回比较慢,如果在加载过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信息。

此时,我们就需要为网页添加一个提示信息,常用的提示信息是“加载中...”,代码如下:

<p id="loading">加载中...</p>
登入後複製

当Ajax请求开始时,将此元素显示,用来提示用户Ajax请求正在进行;当Ajax请求结束后,将此元素隐藏。代码如下:

$("#loading").ajaxStart(function(){
    $(this).show();
  }).ajaxStop(function(){
 $(this).hide();
 })
登入後複製

好了,下面再给大家分享一个案例代码:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});
登入後複製

end,代码到此结束。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

ajax怎么实现网络请求的封装

Ajax和JavaScript使用的区别

以上是$.Ajax()方法的參數如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板