[javascript] 建立jQuery ajax()請求

前端的資料是死的，必須藉由後端讓前端資訊活起來。

本篇介紹如何使用jQuery中的ajax()在前端要求後端API提供資訊。

前置說明

以下ajax()方法須先引用jQuery函式庫。

定義和用法

jQuery ajax()方法透過HTTP請求拿取數據。

語法:

$.ajax([settings])
//或
jQuery.ajax([settings])

常用參數:

• URL
  • Type: String
  • 發送請求的目標網址，預設為當前頁面網址。
• async
  
  • Type: Boolean
  • 預設為’true’，預設所有請求為異步請求。若設定為’false’則為同步請求，使用者瀏覽器將等待請求完成才可繼續操作。
• type 或 method
  • Type: String
  • 預設為”GET”，值可為”GET”,”POST”或”PUT”。
    若使用jQuery1.9.0之前的版本，須使用type，1.9.0後的版本可使用method。
• data
  • Type: String
  • 傳送至server的資料，將附加在URL後傳出。
    data:”Gender=female”,
    或使用key/value型式
    data: {Gender:”female”},
• dataType
  • Type: String
  • 預期後端傳回之資料類型。可用值有以下幾種:
    • “xml”
    • “html”
    • “script”
    • “json”
    • “jsonp”
    • “text”
• success
  • Type: Function
  • 請求成功後之call back 。
    success:(data, textStatus){},
    
• error
  • Type: Function
  • 請求失敗時之call back 。
    error:(xhr,ajaxOptions,thrownError){} ,
    
• complete
  • Type: Function
  • 請求完成(無論成功or失敗)之call back 。
    (XMLHttpRequest, textStatus){},
    

實際操作範例

$("#sendout").click(() {
    $.ajax({
        type :"GET",
        url  : "/APItest",
        data : { 
            Gender: "female",                            
        },
        dataType: "json",
        success : (data) {
            console.log(data);
        }
    });
});

藉由以上程式碼，就可以對APItest此URL之API做資料拿取，
使用者端在按下id為sendout的元件後，
對該API傳出 /APItest?Gender=”female”，
並等待回傳資料成功後，在瀏覽器consle中顯示回傳之json。