jQuery AJAX 復用封裝包：正確引入 JS 文件並調用預定義方法傳遞數據

場景

• 後台 API 已就緒。
• 前端頁面已寫好。
• 團隊已封裝好 ajax-util.js（包含統一錯誤處理、Loading、Token 註入等）。
• **問題：如何在當前頁面引入並調用該封裝？**

標準引入與調用步驟

1. HTML 頁面引入（順序：jQuery → 封裝包）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/js/ajax-util.js"></script>  

2. 封裝包典型導出結構（參考）

// ajax-util.js
var AjaxUtil = (function($) {
    function request(options) {
        // 合並默認配置
        var defaults = {
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            beforeSend: function(xhr) { xhr.setRequestHeader('X-Token', getToken()); },
            error: function(xhr) { handleError(xhr); }
        };
        return $.ajax($.extend({}, defaults, options));
    }
    return { request: request, get: get, post: post }; // 暴露到全局
})(jQuery);

3. 頁面中調用

<script>
$(function() {
    $('#btnSubmit').click(function() {
        var data = { username: $('#user').val(), pwd: $('#pwd').val() };
        
        // 調用封裝好的 post 方法
        AjaxUtil.post({
            url: '/api/login',
            data: JSON.stringify(data),
            success: function(res) {
                if (res.code === 200) {
                    window.location.href = '/dashboard';
                } else {
                    alert(res.msg);
                }
            }
        });
    });
});
</script>

關鍵檢查點

1. 引入順序：jQuery 必須在封裝包**之前**載入（封裝包依賴 $/jQuery）。
2. 全局對象名：確認封裝包暴露的變量名（如 AjaxUtil、HttpClient、api），查看文件末尾 window.Xxx = ... 或 return {}。
3. 方法簽名：閱讀封裝包源碼或文檔，確認 post/get/request 參數結構（url, data, success, error 等）。
4. Content-Type：若後台接收 JSON，確保封裝包默認 contentType: 'application/json' 並 JSON.stringify(data)。

進階：模塊化項目中引入 (Webpack/Vite)

// ajax-util.js (ES Module)
export const request = (options) => { ... };
export const get = (url, params) => ...;
export const post = (url, data) => ...;

// 頁面組件中
import { post } from '@/utils/ajax-util';

post('/api/login', { username, pwd }).then(res => { ... });

「引入順序對、對象名對、方法簽名對」三對齊，現成 AJAX 封裝包即拿即用，勿重複造輪子。