jQuery Ajax 全局调用封装实例代码详解
文章标题：jQuery Ajax全局调用封装详解：优雅的解决方案
在Web开发中，我们经常遇到需要全站异步调用数据或提交数据的情况。如果不进行封装，每次操作都需要使用$.ajax({.....})写重复的方法和代码，这不仅冗余，而且浪费时间。尽管有代码自动补全功能，但这显然不够优雅。身为前端开发者，我们不能容忍这种情况。
尽管我现在基本不再使用jQuery，但异步概念永远是必备的，尤其对于新人来说更是如此。我们可以通过封装jQuery Ajax来优化全局的异步调用。
确保你的项目中已经引入了jQuery库。你可以通过以下方式引入：
```html
```
接下来，我们可以开发一个Ajax封装类，以便全站使用。以下是测试通过的直接可调用的代码：
```javascript
jQuery(function($) {
// 封装Ajax通用方法
$.fn.extend({ // 使用jQuery的fn扩展方法添加新功能到jQuery对象上
linjqAjax: function(url, data, async) { // 提供封装的Ajax方法
// 默认参数设置
var defaults = { // 默认参数配置，如url、data等可以根据需求调整
url: url, // 发送请求的地址
data: data || {}, // 发送到服务器的数据，可以是对象或数组等数据类型
async: async !== false // 默认设置为true表示异步请求，如果需要同步请求则设置为false（注意同步请求会锁住浏览器）
};
// 使用jQuery的ajax方法进行请求处理（可以根据实际需求进行参数调整）
return $.ajax({
url: defaults.url,
data: defaults.data,
async: defaults.async, // 设置异步或同步请求类型（默认为异步）
// 其他参数设置... 如dataType, type等（根据实际情况调整）
}); // 返回ajax请求的结果（通常是Promise对象）以便进行后续处理（如链式调用等）
} // linjqAjax方法定义结束
}); // jQuery扩展结束
}); // jQuery文档加载完成函数结束
请求封装与调用模拟
第一部分：jQuery 请求封装
在前端开发中，我们经常使用 AJAX 来与服务器进行数据交互。为了更好地管理和简化这些操作，我们可以对 AJAX 请求进行封装。以下是使用 jQuery 进行的简单封装：
```javascript
// 封装 GET 请求
jQuery.axGet = function(url, data, suessfn, errorfn) {
data = data || {"date": new Date().getTime()}; // 如果未提供数据，则默认发送当前时间戳
var async = typeof async === 'undefined' ? true : async; // 默认异步请求
$.ajax({
type: "GET",
data: data,
url: url,
success: suessfn, // 成功回调函数
error: errorfn, // 失败回调函数
async: async // 可选：是否异步请求
});
};
// 封装 POST 请求（基础版）
jQuery.axPostSimple = function(url, data) {
data = data || {"date": new Date().getTime()}; // 如果未提供数据，则默认发送当前时间戳
$.ajax({
type: "POST",
data: data,
url: url,
dataType: "json", // 预期服务器返回的数据类型
success: function(response) {
console.log("数据成功返回：", response); // 可在此处添加自定义成功处理逻辑
}
});
};
// 封装带回调的 POST 请求
jQuery.axPostWithCallbacks = function(url, data, suessfn, errorfn) {
data = data || {"date": new Date().getTime()}; // 如果未提供数据，则默认发送当前时间戳
$.ajax({
type: "POST",
data: data,
url: url,
dataType: "json", // 服务器预期返回的数据类型
success: suessfn, // 成功时的回调函数
error: errorfn, // 请求失败时的回调函数
});
};
```
第二部分：调用模拟示例
接下来是一个简单的 HTML 页面示例，演示如何调用上述封装的 AJAX 方法：
```html