自從jQuery 提供Ajax 非同步請求/ 處理的機制,網頁前端的處理就越來越便利與多元化。
什麼是Ajax的?
Ajax 是A synchronous J avaScript a nd X ML的縮寫,是一種不需要重新整理頁面,透過JavaScript來與伺服器交換資料、更新網頁內容的技術。目的在於改善使用者的操作介面,提昇流暢度。
$.ajax({
/*
參數型態: Boolean
說明: 是否啟用非同步方法
true: 非同步,不用等$.ajax(){...} 執行完就會直接執行主程式
false: 同步, 必須等$.ajax(){...} 執行完才會繼續執行主程式
預設值: true
*/
async : true,
/*
參數型態: Boolean
說明: 1.2版加入的新功能,如果發現瀏覽器一直抓到舊資料,設定成flase就不會從瀏覽器中抓cache住的舊資料
預設值: true
*/
cache : false,
/*
參數型態: String
說明: 傳送資料至Server的編碼類型
預設值: application/x-www-form-urlencoded; charset=UTF-8
*/
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
/*
參數型態: Boolean
說明: 是否觸發全域Ajax事件
預設值: true
*/
global : true,
/*
參數型態: Boolean
說明: 由Last-Modified header判斷,僅在Server更新文件時才下載
預設值: false
*/
ifModified : false,
/*
參數型態: Boolean
說明: 1.5版加入的新功能,是否自動將data轉為query string
預設值: true
*/
processData : true,
/*
參數型態: Boolean
說明: 1.5版加入的新功能,跨網域 data type必須設定成 'jsonp'
預設值: false
*/
crossDomain: false,
/*
參數型態: String
說明: 指定要進行呼叫的路徑,MVC為「/Controller/method」, WebForm為「method.php」
預設值: false
*/
url: "/Controller/method",
/*
參數型態: Object, String
說明: 傳送至Server的資料,會自動轉為query string的型式
如果是GET請求還會幫你附加到URL
可用processData選項禁止此自動轉換,物件型式則為一Key/Value pairs
傳送表單值方法:
1.「{ 後端方法名稱: HTML input name名稱}
2. serialize() 序列化表單 input 內容為「name1=value1&name2=value3···」格式的字串
若 HTML input 的 name 與後端 Class Model 名稱相同,會自動 Mapping 值
3. serializeArray() 序列化表單 input 內容為 JSON 結構資料
預設值: 無
*/
data: { UserName: UserName, PassWord: PassWord },
/*
參數型態: String [POST/GET]
說明: 請求方式
預設值: GET
*/
type:"POST",
/*
參數型態: String
說明: 預期Server傳回的資料類型,可選的資料類型有:
1. xml:傳回可用jQuery處理的XML
2. html:傳回HTML,包含jQuery會自動幫你處理的script tags。
3. script:傳回可執行的JavaScript。(script不會被自動cache,除非cache設為true)
4. json:傳回JSON
5. jsonp:在URL加上?callback=?參數,並在Server端配合送回此jsonp callback。(JSONP?)
6. text:傳回純文字字串
預設值: jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback
*/
dataType:'text',
/*
參數型態: Function
說明: 過濾Server回傳的資料,函式中第一個參數為資料,第二個則為dataType
預設值: 無
*/
dataFilter: function(data, type){
// 自訂實作方法
},
/*
參數型態: Function
說明: 發送請求之前事件,在此函式中return flase可取消Ajax request
預設值: 無
*/
beforeSend: function(){
// 自訂實作方法
},
/*
參數型態: Function
說明: 請求成功時執行函式,資料可以是: xmlDoc, jsonObj, html, text, etc...
預設值: 無
*/
success: function(data, textStatus){
// 自訂實作方法
},
/*
參數型態: Function
說明: 請求發生錯誤時執行函式,通常textStatus或errorThrown只有一個有值
預設值: 無
*/
error:function(XMLHttpRequest, textStatus, errorThrown){
// 自訂實作方法
},
/*
參數型態: Function
說明: 請求完成時執行的函式,(不論結果是success或error) 都會進入此函式
預設值: 無
*/
complete: function(){
// 自訂實作方法
}
});
jQuery Ajax 官方說明文件
http://api.jquery.com/jquery.ajax/
較常運用簡易範例
$.ajax({
url: "/Controller/method",
data: $("#form").serialize(),
type:"POST",
success: function(data){
// 後端方法回傳結果
},
complete: function(){
// 最後結果
}
});