统一对ajax请求的结果进行处理，包括消息提示、错误处理等操作，这样可以保证我们的项目有一个统一的风格，同时也简化了大量的代码。
- ajax回调信息提示响应处理，比如提示成功或失败等消息。
- 提交按钮需要在ajax请求中阻止提交（防止多次提交）
- 同时发起多次ajax请求
插件全局设置：
| 属性名 | 默认值 | 说明 |
| templateName | "default" | 默认模板名 |
| isExclusive | true | 独占请求 |
插件选项：
| 属性名 | 默认值 | 说明 |
| id | "" | 发起请求的标识，可以随意指定，主要是便于判断该请求为同一类型的操作。比如，一个表单提交按钮来触发一个或一组ajax请求的情况，我们可以指定id来标识用户单击这个提交按钮时的请求，这样，如果是在独占模式情况下，本插件就会通过这个id，判断上一次请求是否已经结束，如果未结束，则不做任何处理，如果已结束，则可以再重新发起请求。这样做的好处是，防止用户在短时间内，多次单击提交按钮。（以往旧的做法是，在请求时，禁用这个按钮。）注意：如果未指定则默认为贪婪模式；在独占请求时，必须指定有效的值。 |
| templateName | 【全局设置】中的templateName属性。如果未指定，则为"default" | 指定结果消息处理所使用的模板 |
| templateOption | {} | 模板自定义选项，此属性完全由用户在不同的模板中根据需要自定义，详细请参考【模板选项】 |
| isExclusive | 【全局设置】中的isExclusive属性 | true:独占请求，要想再发起同样的一个请求，必须等待上次请求结束；false:贪婪请求，不限制重复请求。 |
| ajax | [] | $.ajax选项，数组的每一项代表一个ajax请求，可以有多个ajax请求。如果只有一个请求，可以不用数组，直接用{...}替代。如果没有传递此参数或数组项长度为0，则使用默认的ajax行为。默认值请参考【ajax默认选项】。 |
| target | null | 发起事件的对象，主要是便于对该对象进行锁定等操作 |
| targetOption | {} | target自定义选项 |
| preBefore | null | 在before前执行，如果返回fase，则不再执行before的后续操作，同时也终止本次ajax请求 |
| before | null | ajax请求前function，如果未指定，则执行模板中的before函数，如果返回fase，则不再执行before的后续操作，同时也终止本次ajax请求 |
| postBefore | null | 在before后执行，如果返回fase，则终止本次ajax请求 |
| preSuccess | null | 在success前执行，如果返回fase，则不再执行success的后续操作 |
| success | null | ajax成功后function，如果未指定，则执行模板中的success函数，如果返回fase，则不再执行success的后续操作 |
| postSuccess | null | 在success后执行 |
| preComplete | null | 在complete前执行，如果返回fase，则不再执行complete的后续操作 |
| complete | null | ajax完成后function，如果未指定，则执行模板中的complete函数，如果返回fase，则不再执行complete的后续操作 |
| postComplete | null | 在complete后执行 |
| preError | null | 在error前执行，如果返回fase，则不再执行error的后续操作 |
| error | null | ajax失败后function，如果未指定，则执行模板中的error函数，如果返回fase，则不再执行error的后续操作 |
| postError | null | 在error后执行 |
模板选项：
| 属性名 | 默认值 | 说明 |
| name | 模板名 | |
| before | function (ops) |
请求前，如果返回false，则阻止后续执行。
ops:当前插件选项 |
| error | function (ops) |
失败后执行的函数。
ops:当前插件选项 |
| success | function(ops, datas) |
成功后执行，datas为数组或对象。
ops:当前插件选项 datas:请求返回的数据，如果有多个ajax请求，则为数组，否则直接为输出的对象值。 |
| complete | function (ops) | 完成后执行。
ops:当前插件选项 |
| templateOption | {} | 模板自定义选项 |
ajax默认选项:
| 属性名 | 默认值 | 说明 |
| url | 如果没有指定，则为第一个form的action,如果还没有指定，则为location.href | ajax请求路径 |
| dataType | "JSON" | 数据格式 |
| type | "get" | 请求方式 |
| data | 第一个form序列化值（jquery的serialize()方法） | 发送的数据 |
| 方法名 | 说明 |
| $.XGoAjax.addTemplate(model) | 给该插件添加一个新的模板，model请参考【模板选项】 |
| $.XGoAjax.getAjaxList() | 获取当前正在处理的ajax对象 |
| $.XGoAjax.getTemplate(name) | 根据模板名获取模板对象 |
| $.XGoAjax.globalSettings({...}) | 本插件全局设置，可设置templateName、mode... |
| $.XGoAjax.getGlobalSettings() | 获取本插件全局设置 |
/**************默认模板：*******************/
//每次单击发出一个ajax请求（当前必须只有一个请求，独占模式）
$("#btnSave1").on("click", function () {
$.XGoAjax({
id: "btnSave1",
ajax: { url: "data.aspx" }
});
});
//每次单击发出一个ajax请求（可以发出多个请求，贪婪模式）
$("#btnSave2").on("click", function () {
$.XGoAjax({
isExclusive: false,
ajax: { url: "data.aspx" }
});
});
//每次单击发出多个ajax请求（当前必须只有一组请求，独占模式）
$("#btnSave3").on("click", function () {
$.XGoAjax({
id: "btnSave3",
ajax: [{
type: "get",
url: "data.aspx"
}, {
type: "post",
url: "data.aspx"
}]
});
});
//每次单击发出多个ajax请求（可以发出多组请求，贪婪模式）
$("#btnSave4").on("click", function () {
$.XGoAjax({
isExclusive: false,
ajax: [{
type: "get",
url: "data.aspx"
}, {
type: "post",
url: "data.aspx"
}]
});
});
/**************artdialog模板：*******************/
//每次单击发出一个ajax请求（当前必须只有一个请求，独占模式）
$("#btnSaveArtdialog1").on("click", function () {
$.XGoAjax({
templateName: "artdialog",
id: "btnSaveArtdialog1",
ajax: { url: "data.aspx" }
});
});
//每次单击发出一个ajax请求（可以发出多个请求，贪婪模式）
$("#btnSaveArtdialog2").on("click", function () {
$.XGoAjax({
templateName: "artdialog",
isExclusive: false,
ajax: { url: "data.aspx" }
});
});
//每次单击发出一个ajax请求（可以发出多个请求，贪婪模式）
$("#btnSaveArtdialog3").on("click", function () {
$.XGoAjax({
templateName: "artdialog",
id: "btnSaveArtdialog3",
ajax: [{
type: "get",
url: "data.aspx"
}, {
type: "post",
url: "data.aspx"
}]
});
});
//每次单击发出多个ajax请求（可以发出多组请求，贪婪模式）
$("#btnSaveArtdialog4").on("click", function () {
$.XGoAjax({
templateName: "artdialog",
isExclusive: false,
ajax: [{
type: "get",
url: "data.aspx"
}, {
type: "post",
url: "data.aspx"
}]
});
});
/******************事件***********************/
//所有事件（基本）
$("#btnSaveWithEvent").on("click", function () {
var _this = this;
$.XGoAjax({
id: "btnSaveWithEvent",
ajax: { url: "data.aspx" },
preBefore: function () {
console.log("preBefore");
},
before: function () {
console.log("before");
},
postBefore: function () {
console.log("postBefore");
},
preSuccess: function () {
console.log("preSuccess");
},
success: function () {
console.log("success");
},
postSuccess: function () {
console.log("postSuccess");
},
preComplete: function () {
console.log("preComplete");
},
complete: function () {
console.log("complete");
},
postComplete: function () {
console.log("postComplete");
},
preError: function () {
console.log("preError");
},
error: function () {
console.log("error");
},
postError: function () {
console.log("postError");
}
});
});
//before返回false时
$("#btnSaveWithEvent1").on("click", function () {
$.XGoAjax({
id: "btnSaveWithEvent1",
ajax: { url: "data.aspx" },
preBefore: function () {
console.log("preBefore");
return false;
},
before: function () {
console.log("before");
},
postBefore: function () {
console.log("postBefore");
},
preSuccess: function () {
console.log("preSuccess");
},
success: function () {
console.log("success");
},
postSuccess: function () {
console.log("postSuccess");
},
preComplete: function () {
console.log("preComplete");
},
complete: function () {
console.log("complete");
},
postComplete: function () {
console.log("postComplete");
},
preError: function () {
console.log("preError");
},
error: function () {
console.log("error");
},
postError: function () {
console.log("postError");
}
});
});
//指定target，在请求中禁用按钮
$("#btnSaveWithEvent2").on("click", function () {
var _this = this;
$.XGoAjax({
templateName: "artdialog",
target: _this,
isExclusive: false,
id: "btnSaveWithEvent2",
ajax: { url: "data.aspx" }
});
});
具体Demo请参见源码中的：XGoAjax\Web\Index.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent