jQuery ajax用法與ajax學習筆記

來源:互聯網
上載者:User

.$.post(url, params, callback) 用post的方式下載一個頁面返回XMLHttpRequest

url: 請求的頁面

params:表示請求的要發送的參數.

callback: 請求結束後,調用的方法

eg:

 代碼如下 複製代碼
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);


ajaxStart(callback) 當ajax請求發送前,將觸發callback.

eg;

 代碼如下 複製代碼

$("#loading").ajaxStart(function(){
  $(this).show();
});

ajaxSend(callback)當ajax請求發送時觸發callback,參數是XMLHttpRequest和settings請求設定eg:

 代碼如下 複製代碼
$("#msg").ajaxSend(function(request, settings){
  $(this).append("<li>Starting request at " + settings.url + "</li>");
});

ajaxComplete(callback)當一個ajax請求完成時調用callback.回調參數為XMLHttpRequest和settings請求設定eg:

 代碼如下 複製代碼
$("#msg").ajaxComplete(function(request, settings){
  $(this).append("<li>Request Complete.</li>");
});

ajaxSuccess(callback)當一個ajax請求成功時調用回調參數為XMLHttpRequest和settings請求設定eg:

 代碼如下 複製代碼
$("#msg").ajaxSuccess(function(request, settings){
  $(this).append("<li>Successful Request!</li>");
});

ajaxError(callback)當一個ajax請求失敗時調用回調參數為XMLHttpRequest和settings請求設定eg:

 代碼如下 複製代碼
$("#msg").ajaxError(function(request, settings){
  $(this).append("<li>Error requesting page " + settings.url + "</li>");
});

ajaxStop(callback)當所有的ajax請求結束時,將觸發callback

eg:

 代碼如下 複製代碼
$("#loading").ajaxStop(function(){
  $(this).hide();
});

load(url, params, callback)載入url的內容,並把得到的內容插入到DOM中去. 注意:避免去擷取script指令碼.可以用$.getScripturl:請求的頁面,params:發送的參數.callback: 調用完成後的回呼函數.eg:

 代碼如下 複製代碼
<div id="feeds"></div>$("#feeds").load("feeds.html")==><div id="feeds"><b>45</b> feeds found.</div>;

loadIfModified(url, params,callback)功能與85點的load方法一模一樣.唯一的區別是,當伺服器端根據LastModify判斷出沒有什麼改動的話.就不進行請求.也不進行dom插入.

serialize()這是一個十分有用的方法.一般用來序列化進行ajax請求的參數.十分方便eg

 代碼如下 複製代碼

:<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>$("input[@type=text]").serialize();==>name=John&location=Boston


 

.$.ajax(params)這個方法是jQuery中調用ajax的最基本方法,功能十分強大.參數是一個對象.所有的參數用key:value的形式設定

下面主要介紹一下各種參數:

(string)url: 要請求的網址,可以把參數get參數設定到url上面

(string)type: 請求的類型,可以是Post與get,預設情況下是GET

(string)dataType: 你所期望返回的資料格式,可以是xml,html,script,json.最終傳回型別還是伺服器決定.

(Boolean)ifModified:只當傳回值改變的時候才會成功返回正確值.主要判斷依據是要求標頭的Last-Modified.預設情況下,這個值設定為false

(Number)timeout:佈建要求時間,這個時間會替換全域的時間($.ajaxTimeout)

(Boolean)global:是否觸發全域的ajax事件控制代碼.例如ajaxStart,ajaxStop.預設情況是true

(Function)error: 請求錯誤處理的函數.

(Function)success: 請求成功處理的函數.

(Function)complete:請求完成處理的函數.

(Object|string)data:發送到伺服器端的資料.如果不是字串,則被轉化成字串,被加到url上面,做為查詢字串.如果不想用預設的方式處理,可以設定processData狀態.

(Boolean)processData.預設情況是true,把object轉化成string,做查詢字串.可以設定為false,則以DOMDocments發送.

(String)contentType.預設是"application/x-www-form-urlencoded",一般情況不用修改.

(Boolean)async .預設值為true.表示非同步請求,如果想改成同步.只要把設為false就可以了.

(Function)beforeSend.用於對在發送請求之前,對要求標頭的設定.有XMLHttpRequest做為參數

例子:

取一個js檔案.

 代碼如下 複製代碼

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
})

post資料到伺服器端,並且成功時提示使用者.

 代碼如下 複製代碼

$.ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

同步請求資料

 代碼如下 複製代碼

var html = $.ajax({
 url: "some.php",
 async: false
})

.responseText;傳送domdocument,data將不會被強行轉化.var xmlDocument = [create xml document];

 代碼如下 複製代碼
$.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument,
  success: handleResponse
});


$.ajaxSetup(settings)設定一個全域的ajax變數.一般用來設定一些公用的要求標頭設定.

 代碼如下 複製代碼
$.ajaxSetup( {
  url: "/xmlhttp/",
  global: false,
  type: "POST"
} );
$.ajax({ data: myData });

$.ajaxTimeout(time) 設定全域ajax請求時間,當time為0或者null時表示不限時間$.ajaxTimeout( 5000 ); //表示最長5秒請求.

$.get(url, params, callback)下載一個頁面.url:頁面地址,params: 參數,是key/value的mapcallback: 請求結束後調用的方法eg:

 代碼如下 複製代碼
$.get("test.cgi",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

$.getIfModified(url, params, callback)與get一樣,不同之處在於如果請求的頁面傳回值不變的話,就不處理請求.

 代碼如下 複製代碼

$.getJSON(url, params,callback)與$.get一樣,傳回值是用json格式後好的.

$.getScript(url, callback)下載指令檔,並運行.eg:$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.