抑制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