使用 jQuery Ajax 語法 教學

How to use jQuery Ajax without painness

151
    今天要讓大家無痛使用 jQuery Ajax
    讓大家可以跳過看複雜的document直接來這邊取用就可以了。
  • 程式範例
    例如: 點擊一個按鈕,做一些什麼事情。
    因此可以這樣寫:


    $('.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() 有最多的東西可以設定,所以我們只介紹這個:
    1. 在url設定要將資料傳到哪個檔案

    2. 在data設定要傳送的變數

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

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

    5. 在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囉!

喜歡我們的文章嗎
給一個讚吧~^^
本站聲明
目前偵測到您現在處於未登入的狀況中 若在此狀態進行收藏很有可能導致資料遺失或錯誤 建議先行登入後重新執行步驟,不僅能保障收藏資料也能獲得最新的資訊唷! kikinote小精靈關心您!
不再顯示此視窗