统一对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()方法)(默认form读取逻辑:在未指定data的情况下,先读取target同一容器中的form,若没有则取页面的第一个form) | 发送的数据 |
方法名 | 说明 |
$.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