抑制SUCCESS警報框？

Question

我有叫如下圖所示（不包括功能）三種功能：

代碼：

$("#btnSubmit").click(function() { 
    var data = JSON.stringify(getAllSourcepData()); 
    console.log(data); 
    $.ajax({ 
     url: 'closures.aspx/SaveSourceData', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ 
      'empdata': data 
     }), 
     success: function() { 
      alert("Data Added Successfully"); 
     }, 
     error: function() { 
      alert("Error while inserting data"); 
     } 
    }); 
}); 
$("#btnSubmit").click(function() { 
    var data = JSON.stringify(getAllSpouseData()); 
    console.log(data); 
    $.ajax({ 
     url: 'closures.aspx/SaveSpousData', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ 
      'empdata': data 
     }), 
     success: function() { 
      alert("Data Added Successfully"); 
     }, 
     error: function() { 
      alert("Error while inserting data"); 
     } 
    }); 
}); 
$("#btnSubmit").click(function() { 
    var data = JSON.stringify(getAllDividentData()); 
    console.log(data); 
    $.ajax({ 
     url: 'closures.aspx/SaveDividentData', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ 
      'empdata': data 
     }), 
     success: function() { 
      alert("Data Added Successfully"); 
     }, 
     error: function() { 
      alert("Error while inserting data"); 
     } 
    }); 
}); 

當數據被成功提交，三警告框彈出，每個相同的消息：「數據已成功添加「。

這迫使用戶必須關閉三個彈出框。

有沒有辦法禁用成功的警報框只留下一個？或者甚至三個人都被禁用，讓我想出一個自定義的成功消息？

Answer 1

您還可以通過使用Promise.all簡化代碼：

$("#btnSubmit").click(function() { 

    var allSourcepData = JSON.stringify(getAllSourcepData()); 
    var allSpouseData = JSON.stringify(getAllSpouseData()); 
    var allDividentData = JSON.stringify(getAllDividentData()); 

    Promise.all([ 

     getData('closures.aspx/SaveSourceData', allSourcepData), 
     getData('closures.aspx/SaveSpousData', allSpouseData), 
     getData('closures.aspx/SaveDividentData', allDividentData) 
     ]) 
     .then(alert) 
     .catch(alert) 
}); 


function getData(url, data) 
{ 
    return new Promise((resolve, reject){ 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 
       'empdata': data 
      }), 
      success:() => { resolve("Data Added Successfully") }, 
      error:() => { reject("Error while inserting data"); } 

     }); 
    }) 
    } 

Answer 2

您需要等到所有Ajax請求是完整的，就像在this answer

所以你的情況，你需要爲所有$就調用這樣的功能：

function ajax1() { 
    var data = JSON.stringify(getAllSourcepData()); 
    $.ajax({ 
     url: 'closures.aspx/SaveSourceData', 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ 
      'empdata': data 
     }), 
     success: function() { 
      alert("Data Added Successfully"); 
     }, 
     error: function() { 
      alert("Error while inserting data"); 
     } 
    }); 
} 
// add ajax2() and ajax3() ... 

然後用只有一個點擊處理程序是這樣的：

$("#btnSubmit").click(function() { 
    $.when(ajax1(), ajax2(), ajax3()).then(function(a1, a2, a3){ 
     // success, display message 
    }, function(){ 
     // exception 
    }); 
}); 

Answer 3

爲什麼你想打3次按鈕點擊？ 爲什麼不把它們放在一起？ 任何如何使用變量isAlertToBeShown = false並在推送數據後使其成爲true。最後檢查變量是真是假。

Answer 4

您可以重一點你的代碼使用遞延法將jQuery 1.5以上，否則就可以實現爲這樣的回答：

jQuery callback for multiple ajax calls