JQuery - 如何使用ajax要求

2014-07-29 10:17 PM

程式碼範例

Post

$.ajax("TARGET_URL",
 {
 "type"   : "post",
 "data"   : {"var1" : value1, "var2":value2},
 "success"  : reqeustSuccess,
 "complete"  : requestComplete,
 "error"  : requestFailure}
});

function reqeustSuccess(data, textStatus, jqXHR){
 // request success
}

function requestComplete(jqXHR,textStatus){
 if( textStatus == "success" ){
  // Request success
 }
 else{
  // Request failed
 }
}

function requestFailure(jqXHR, textStatus, errorThrown){
 // request failed
}

Get

$.ajax("TARGET_URL",
 {
 "type"   : "get",
 "data"   : {"var1" : value1, "var2":value2},
 "success"  : reqeustSuccess,
 "complete"  : requestComplete,
 "error"  : requestFailure}
});

function reqeustSuccess(data, textStatus, jqXHR){
 // request success
}

function requestComplete(jqXHR,textStatus){
 if( textStatus == "success" ){
  // Request success
 }
 else{
  // Request failed
 }
}

function requestFailure(jqXHR, textStatus, errorThrown){
 // request failed
}

詳細解說

// 發出ajax要求 其中TARGET_URL代表要求的目標網址
$.ajax("TARGET_URL",
 {
 // 要求的方法 可以是get, post, put, delete 最常使用的是get與post分別代表取得資源與修改資源
 // put, delete則需視瀏覽器是否支援 如果是用Java + springMVC開發也需要另外做設定才可以取得要求參數
 "type"   : "post",
 // 要求參數 可以放入任何字串型態(或是可以轉換為字串)的變數 
 // 當然其他種類也可以 只是server端可能讀不到甚麼東西就是了
 "data"   : {"var1" : value1, "var2":value2},
 // 要求成功時的 call back 方法 通常可以用來告知使用者要求成功這一類的自訂回應訊息
 "success"  : reqeustSuccess,
 // 要求完成時的 call back 方法 不論要求失敗及成功皆會呼叫這個方法 可以做例外處理
 "complete"  : requestComplete,
 // 要求失敗時的 calll back 方法 當要求失敗時可以告知使用者武要求有問題 
 // 搭配server端回傳的訊息 可以讓使用者做出適當的處理
 "error"  : requestFailure}
});

各項資料連結

JQuery 官方網站
ajax說明文件