当前位置：首页 > jquery

jquery ajax封装

2026-03-17 04:18:06jquery

jquery ajax封装

jQuery AJAX 封装方法

封装 jQuery AJAX 可以简化重复代码，提高开发效率。以下是几种常见的封装方式：

基础封装示例

function ajaxRequest(url, method, data, successCallback, errorCallback) {
    $.ajax({
        url: url,
        type: method,
        data: data,
        dataType: 'json',
        success: function(response) {
            successCallback(response);
        },
        error: function(xhr, status, error) {
            errorCallback(error);
        }
    });
}

带默认配置的封装

function ajaxRequest(options) {
    const defaults = {
        url: '',
        type: 'GET',
        data: {},
        dataType: 'json',
        contentType: 'application/json'
    };

    const settings = $.extend({}, defaults, options);

    return $.ajax(settings);
}

Promise 风格封装

function ajaxPromise(url, method, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: resolve,
            error: reject
        });
    });
}

使用示例

// 基础封装调用
ajaxRequest('/api/data', 'GET', {}, 
    function(response) {
        console.log(response);
    },
    function(error) {
        console.error(error);
    }
);

// Promise 封装调用
ajaxPromise('/api/data', 'GET', {})
    .then(response => console.log(response))
    .catch(error => console.error(error));

高级封装（带拦截器）

const ajax = {
    request: function(config) {
        // 请求前处理
        if (typeof config.beforeSend === 'function') {
            config.beforeSend();
        }

        return $.ajax(config)
            .done(function(response) {
                if (typeof config.success === 'function') {
                    config.success(response);
                }
            })
            .fail(function(xhr, status, error) {
                if (typeof config.error === 'function') {
                    config.error(error);
                }
            });
    }
};