無痛使用jQuery Ajax

今天要讓大家無痛使用 jQuery Ajax

讓大家可以跳過看複雜的document直接來這邊取用就可以了

Part1: 程式範例

先舉例一個做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 了

Part2: Ajax 設定與使用

然而 jQuery 的 Ajax 有許多方法可以呼叫

其中就以$.ajax() 有最多的東西可以設定，所以我們只介紹這個


在url設定要將資料傳到哪個檔案

在data設定要傳送的變數

在type設定傳送的方式 (GET/POST)

在dataType設定回傳的格式(html/script/json/xml)

在success, error, complete 設定ajax 回傳後要做的事件


Part3: 程式說明

這邊我們以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囉!