需求描述：
此功能模塊是我寫的一個項目中的【氣瓶定檢信息模塊】中用到的一個技術，在添加氣瓶定檢信息數據的同時需要添加4張不同類型的圖片，【大家都知道圖片是不能直接存數據庫的所以這裏需要先上傳圖片獲得圖片URL】然後把獲得的圖片URL與其它需要添加的數據的一起寫入定檢信息表；整個操作過程都是通過Ajax實現； 當點擊提交按鈕時，Ajax與後臺Controller交互得到圖片URL,後再通過另一個Ajax與後臺Controller交互添加數據到數據庫；這個Ajax同步處理的技術，網上很多但都只能做參考對於新手來說沒什麼用；我這邊直接上簡潔的js 代碼共新手使用；
用這個promise對象實現同步
【整個添加數據和上傳圖片都是通過多個Ajax實現，因Ajax是異步的所以我們需要用到promise技術來做成Ajax同步】
===========================================================================
先了解一下promise：（建議先百度瞭解一下）
done()、fail()、progress()分別註冊resolved、rejected、pending狀態下的回調函數。通過resolve()、reject()、notify()可以觸發事先註冊的回調函數。
============================================================================
一 .btn1 按鈕觸發
$("#btn1").click(function(){ //按鈕提交觸發
1.先創建$.Deferred()對象；有幾個ajax就建幾個
var someAjaxDfd = $.Deferred();
var ajax1Dfd = $.Deferred();
var ajax2Dfd = $.Deferred();
var ajax3Dfd = $.Deferred();
2.通過這個$.Deferred()對象獲得這個延遲對象的Promise
// 返回這個延遲對象的Promise
/*產品合格證*/
var its_promise = $.when(someAjaxDfd);
/*質量證書*/
var its_promise1 = $.when(ajax1Dfd);
/* 質量說明書*/
var its_promise2 = $.when(ajax2Dfd);
/* 使用說明書*/
var its_promise3 = $.when(ajax3Dfd);
3.將延遲對象的Promise傳入對應的ajax方法中
/*產品合格證*/
//此方法是第一個運行ajax方法
ProductqualifyurlFileUpload(someAjaxDfd);
its_promise.done(function () { /*質量證書*/
//上個方法結束後第二個運行ajax方法
qualitycertificateurlFileUpload(ajax1Dfd);
});
its_promise1.done(function () { /* 質量說明書*/
//上個方法結束後第三個運行ajax方法
ManufacturingSupervisionInsurFileUpload(ajax2Dfd);
});
its_promise2.done(function () { /* 使用說明書*
//上個方法結束後第四個運行ajax方法
instructionmanualurlFileUpload(ajax3Dfd);
});
its_promise3.done(function () { /*定檢信息數據寫入*/
//上個方法結束後第五個運行ajax方法
createGasCylinderchkInfo(cph);
});
}
}
============================================================================
二.寫Ajax 方法
4. 在ajax方法success: function ()；中；加someAjaxDfd.resolve();這個方法表示此ajax執行成功
/*產品合格證*/
function ProductqualifyurlFileUpload(someAjaxDfd) {
/*產品合格證*/
$.ajaxFileUpload({ //上傳圖片的Ajax
url: "/config/create-AllGasCylinderCheckInfoProductqualifyurlFileUpload",
fileElementId: 'productqualifyurlFile1',
dataType: "json",
success: function (data) {
someAjaxDfd.resolve(); //此對象方法就是代表ajax是執行完成；
},
error: function () {
}
});
}
----------------------------------------------------------------------------------------------------------------------------------
/*質量證書*/
function qualitycertificateurlFileUpload(ajax1Dfd) {
/*質量證書*/
$.ajaxFileUpload({ //上傳圖片的Ajax
url: "/config/create-AllGasCylinderCheckInfoqualitycertificateurlFileUpload",
fileElementId: 'qualitycertificateurlFile2',
dataType: "json",
/*async: false,*/
success: function (data) {
ajax1Dfd.resolve();//此對象方法就是代表ajax是執行完成；
},
error: function () {
DJMask.msg("請圖片上傳失敗");
}
});
}
----------------------------------------------------------------------------------------------------------------------------------
/* 質量說明書*/
function ManufacturingSupervisionInsurFileUpload(ajax2Dfd) {
/* 質量說明書*/
$.ajaxFileUpload({ //上傳圖片的Ajax
url: "/config/create-AllGasCylinderCheckInfoManufacturingSupervisionInsurFileUpload",
fileElementId: 'manufacturingSupervisIoninsurFile2',
dataType: "json",
success: function (data) {
ajax2Dfd.resolve();//此對象方法就是代表ajax是執行完成；
},
error: function () {
DJMask.msg("請圖片上傳失敗");
}
});
}
----------------------------------------------------------------------------------------------------------------------------------
/* 使用說明書*/
function instructionmanualurlFileUpload(ajax3Dfd) {
/* 使用說明書*/
$.ajaxFileUpload({ //上傳圖片的Ajax
url: "/config/create-AllGasCylinderCheckInfoinstructionmanualurlFileUpload",
fileElementId: 'instructionmanualurlFile2',
dataType: "json",
success: function (data)
ajax3Dfd.resolve();//此對象方法就是代表ajax是執行完成；
},
error: function () {
DJMask.msg("請圖片上傳失敗");
}
});
}
----------------------------------------------------------------------------------------------------------------------------------
/*定檢信息數據寫入*/
createGasCylinderchkInfo（cph）{ //以上Ajax都執行結束後最後執行Ajax
$.ajax({ //添加數據的Ajax
type: "POST",
dataType: "json",
url: "/config/add-GasCylinderCheckInfo",//url
data: $("#stuForm").serialize(),
success: function (data) {
console.log("ajax:" + data);
if (data.resultCode == 200) { //狀態碼
$("#messageValue").val(data.failDesc);
$("#btn2").click(); //觸發按鈕（此塊內容與Ajax同步無關）
}
if (data.resultCode == 502){//狀態碼
$("#messageValue").val(data.failDesc);
$("#btn3").click();//觸發按鈕（此塊內容與Ajax同步無關）
}
if (data.resultCode == 505){//狀態碼
$("#messageValue").val(data.failDesc);
$("#btn3").click();//觸發按鈕（此塊內容與Ajax同步無關）
}
;
},
error: function () {
$("#messageValue").val("系統異常操作不成功！\n");
$("#btn3").click();//觸發按鈕（此塊內容與Ajax 同步無關）
}
});
}