JQuery 封装 Ajax 常用方法(推荐)

在web开发中，我们经常需要使用Ajax进行异步通信。但是，每次都写出完整的的Ajax代码（包括请求头、请求类型、成功回调函数等）比较麻烦，而且容易重复。因此，我们可以将其封装成方法，这样可以大大简化我们的代码，提高代码的复用性。

封装方法

下面我们就来介绍如何封装一个常用的Ajax方法：

function ajaxRequest(url, type, data, successFn, errorFn, contentType) {
    $.ajax({
        url: url,
        type: type,
        data: data,
        contentType: contentType || "application/x-www-form-urlencoded; charset=utf-8",
        success: successFn,
        error: errorFn
    });
}

上述方法接收六个参数：

• url：要请求的url地址
• type：请求类型，如GET、POST等
• data：请求参数
• successFn：请求成功回调函数
• errorFn：请求出错回调函数
• contentType：发送信息至服务器时内容编码类型，默认为"application/x-www-form-urlencoded; charset=utf-8"

使用方法

接下来我们就可以使用封装好的方法来发送Ajax请求。例如：

// 发起一个GET请求
ajaxRequest("http://example.com/api", "GET", { id: 1 }, function(data) {
    console.log(data);
}, function(err) {
    console.error(err);
});

// 发起一个POST请求
ajaxRequest("http://example.com/api", "POST", { id: 1, name: "John" }, function(data) {
    console.log(data);
}, function(err) {
    console.error(err);
}, "application/json");

示例说明

示例一

假设我们有一个员工管理页面，需要从服务器获取所有员工的信息。我们可以使用上面封装好的Ajax方法来实现：

// 获取所有员工信息
ajaxRequest("/employees", "GET", null, function(data) {
    // 将数据显示在表格中
    // ...
}, function(err) {
    console.log(err);
});

示例二

假设我们有一个注册页面，需要通过Ajax向服务器发送数据进行注册。我们可以使用上面封装好的Ajax方法来实现：

// 注册
ajaxRequest("/register", "POST", {
    username: "John",
    password: "123456"
}, function(data) {
    // 注册成功后的处理
    // ...
}, function(err) {
    console.log(err);
}, "application/json");

总结

通过封装Ajax方法，我们可以大大简化我们代码的编写，提高代码的复用性和可维护性。