XGoAjax，統一風格處理項目中的ajax請求__Ajax

XGoAjax簡介

統一對ajax請求的結果進行處理，包括訊息提示、錯誤處理等操作，這樣可以保證我們的項目有一個統一的風格，同時也簡化了大量的代碼。

項目地址：https://github.com/xucongli1989/XGoAjax
下載地址：https://github.com/xucongli1989/XGoAjax/releases 使用情境 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");                },                postBefore: function () {                    console.log("postBefore");                },                preSuccess: function () {                    console.log("preSuccess");                },                postSuccess: function () {                    console.log("postSuccess");                },                preComplete: function () {                    console.log("preComplete");                },                postComplete: function () {                    console.log("postComplete");                },                preError: function () {                    console.log("preError");                },                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;                },                postBefore: function () {                    console.log("postBefore");                },                preSuccess: function () {                    console.log("preSuccess");                },                postSuccess: function () {                    console.log("postSuccess");                },                preComplete: function () {                    console.log("preComplete");                },                postComplete: function () {                    console.log("postComplete");                },                preError: function () {                    console.log("preError");                },                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 事件調用流程圖