- 今天要讓大家無痛使用 jQuery Ajax
- 程式範例
例如: 點擊一個按鈕，做一些什麼事情。
因此可以這樣寫：
$('.btn').click(function() {
$.ajax({
url: "check_password.php",
data: {
old_password: $("#old_password").val()
},
type: "POST",
dataType: "json",
success: function(data,textStatus,jqXHR) {
.....code here
},
error: function() {
...code here
},
complete: function() {
...code here
}
});
});
只要在事件中寫入 $.ajax( ..... );就算是做一次ajax了。 - 設定與使用
然而 jQuery 的 Ajax 有許多方法可以呼叫。
其中就以$.ajax() 有最多的東西可以設定，所以我們只介紹這個：- 在url設定要將資料傳到哪個檔案
- 在data設定要傳送的變數
- 在type設定傳送的方式 (GET/POST)
- 在dataType設定回傳的格式(html/script/json/xml)
- 在success, error, complete 設定ajax 回傳後要做的事件。
- 程式說明
這邊我們以json當作舉例，程式碼中我們將變數以POST的方式傳送到check_password.php
然後以json的方式傳回變數data，因此data就是我們做完Ajax所得到的資料。
在這邊筆者一開始有一小點困惑。
究竟在check_password.php中回傳資料要使用echo 還是 return?
A:答案是echo
因為data這個變數在一開始就像是一張空白的紙，你所有在check_password.php 做的輸出都會直接output到data
而Ajax會將data以html的方式抓回來。
到這邊有人會有疑問的是: 我不是選擇以json的方式抓回來嗎？
在這邊我要解釋的是，其實Ajax 抓資料分為兩步驟。
首先先以html的方式抓回,再轉換為使用者要求的格式。
如此就可以無痛的使用Ajax囉！
讓大家可以跳過看複雜的document直接來這邊取用就可以了。
