首頁  >  文章  >  web前端  >  談jQuery Ajax用法詳解_jquery

談jQuery Ajax用法詳解_jquery

WBOY
WBOY原創
2016-05-16 15:29:301375瀏覽

定義與用法

ajax() 方法透過 HTTP 請求載入遠端資料。

此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數,除非你需要操作不常用的選項,以獲得更多的彈性。

最簡單的情況下,$.ajax() 可以不帶任何參數直接使用。

注意:所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。

jQuery Ajax在web應用程式開發中很常用,它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法,下面我來給各位同學介紹介紹。

我們先從最簡單的方法看起,處理複雜的ajax請求時,jQuery使用jQuery.ajax()方法進行處理。在jQuery中有一些簡單的方法,它對jQuery.ajax()方法進行了封裝,使得我們在處理一些簡單的Ajax事件時,不需要使用jQuery.ajax()方法,其中有些方法在之前的文章中已經出現過了,相信大家很快就能掌握。當然,本篇後半部會對jQuery.ajax()方法做非常具體的說明,因為它是本篇的重中之重。

以下5個方法執行一般Ajax請求的簡短形式,在處理複雜的Ajax請求時應該使用jQuery.ajax().

1.load(url,[data],[callback])

載入遠端HTML檔案程式碼並插入至DOM中,預設使用GET方式,傳遞參數時自動轉換為POST方式。

◦url:要載入的遠端url位址
◦data:傳送至伺服器的key/value 資料
◦callback:載入成功時的回呼函數

範例程式碼如下:

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

這裡將顯示已載入的檔案的內容Load

2.jQuery.get(url, [data], [callback])

使用get方式從伺服器端取得資料。

◦發送請求的URL位址
◦要傳送給伺服器的資料
◦載入成功時回呼函數

範例程式碼如下:

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

使用$.get()方法,透過傳遞id來取得不同的logo。值得一提的是,此時是透過get方法獲得請求,所以在取得參數值時要使用Request.QueryString,可以看看Request Request.QueryString的差異

百度logo谷歌logo

這裡將顯示logo3.jQuery.post(url, [data], [callback])
使用POST方式來進行非同步請求。同jQuery.get()相比,差別在於請求的方式,所以這裡不做特別的說明了,使用方法同jQuery.get()相似。

4.jQuery.getScript(url,[callback])

透過 GET 方式請求載入並執行一個JavaScript檔案。這個技術在前邊文章中已經提到過,也是jQuery.ajax的一種簡單的使用方法,可以看看ajax載入js,所以這裡也不做特別的說明了。

5.jQuery.getJSON(url,[data],[callback])

透過get方式取得json格式的資料。

範例程式碼如下:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

一樣的,這也是jQuery.ajax()方法的一種簡寫方法,類似如下方法:

參數列表:

參數名稱 類型 描述
url String (預設: 目前頁位址) 發送請求的位址。
type String (預設: "GET") 要求方式 ("POST" 或 "GET"), 預設為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援。
timeout Number 設定請求超時時間(毫秒)。此設定將覆蓋全域設定。
async Boolean (預設: true) 預設值下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設為 false。注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。
beforeSend Function 傳送請求前可修改 XMLHttpRequest 物件的函數,例如新增自訂 HTTP 頭。 XMLHttpRequest 物件是唯一的參數。
<span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span>
cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
<span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span>
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
發 送到伺服器的資料。將自動轉換為請求字串格式。 GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
dataType String

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

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

"html": 傳回純文字 HTML 資訊;包含 script 元素。

"script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。

"json": 傳回 JSON 資料 。

"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時,如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名,以執行回呼函數。

 

 

 

 

 

error Function (預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。這個方法有三個參數:XMLHttpRequest 對象,錯誤訊息,(可能)捕獲的錯誤對象。
<span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
<span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>

这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

 代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据,我的小站中已经好几次提到了json的使用,如果你还不熟悉json格式,可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法,接下来让我们集中精神,看看jQuery.ajax()方法, 在使用中,笔者也是经常使用的jQuery.ajax(),因为大多数情况,我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据,下边给个常用写法,并做了相应的注释。

 代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步,默认为异步,这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功!"); 
   alert("修改成功!"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常!"); 
   alert("异常!"); 
  } 
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2&#63;password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里,当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等,在以后使用中,我会把它们也总结下来。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn