目前小專案、活動網頁，或者比較舊的系統，都還是會用到 jQuery，這裡簡單整理一下 jQuery ajax的使用方式(以3.7.1版為例)，提供給新手工程師們，以下code都可以直接 copy 使用。
安裝/引入 jQuery
你可以使用 CDN的方式引入
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>也可以到 jQuery官方 下載對應版本
jQuery Ready
撰寫 jQuery 時，會需要先執行 jQuery Ready，用來判斷 jQuery是否載入讀取好，以下兩個寫法都可以使用:
// jQuery Ready
$(document).ready(function() {
// ... 你的 jQuery code
});// jQuery Ready 簡寫
$(function(){
// ... 你的 jQuery code
});到這裡 jQuery 的前置作業就算完成了
jQuery ajax
jQuery 通常使用 ajax 來執行 API，首先我們先定義好要使用的 API 與 DATA
// API URL
const apiUrl = 'https://example.com/api/ex1'
// GET Data
const data = {
key1:'value1',
key2:'value2',
// ...
keyN:'valueN'
}再來加上 ajax 區塊，以下提供 GET / POST 的範本，可直接使用
jQuery AJAX GET Example
// API URL
const apiUrl = 'https://example.com/api/ex1'
// GET Data
const data = {
key1:'value1',
key2:'value2',
// ...
keyN:'valueN'
}
// set headers, ex: { "api-key": "aaabbbccc"}
const headers = { }
// AJAX GET example
$.ajax({
url: apiUrl,
method: "GET",
dataType: "json",
data: data,
headers: headers, // 沒有可以不設定 or 整行刪除
success: function(data) {
// 成功
},
error: function(xhr, status, error) {
// 失敗
}
});jQuery AJAX POST Example
// API URL
const apiUrl = 'https://example.com/api/ex1'
// POST Data
const data = {
key1:'value1',
key2:'value2',
// ...
keyN:'valueN'
}
// AJAX POST example
$.ajax({
url: apiUrl,
method: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
headers: headers, // 沒有可以不設定 or 整行刪除
success: function(data) {
// 成功
},
error: function(xhr, status, error) {
// 失敗
}
});
