Javascript 抑制成功警报框？

我有三个调用如下所示的函数（不包括函数）：

代码：

$("#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");
        }
    });
}); 

成功提交数据后，会弹出三个警报框，每个框都有相同的消息：“数据添加成功”

这迫使用户必须关闭三个弹出框

---

有没有办法禁用只留下一个成功警报框？或者甚至禁用这三个选项，让我可以定制一条成功消息？

您需要等待所有ajax请求完成，如中所示

因此，在本例中，您需要为所有$.ajax调用创建函数，如下所示：

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
    });
});

然后只使用一次单击处理程序，如下所示：

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
    });
});

---

为什么你要打3次电话来点击按钮？ 为什么不把它们都放在一起呢？

---

任何您可以使用变量Isalertobeshown=false的方式，并在推送数据后使其为true。最后检查变量是否为真

您可以对代码重新排序，以使用jQuery 1.5+的延迟方法，否则您可以实现如下答案：

---

您还可以使用Promise简化代码。所有：

$("#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"); }

        });
    })
  }

---

如果前一个通过，但后两个失败，您希望它表现如何？这是我怀疑的承诺的一个很好的使用案例。在第一个警报显示后，你不能有一些变量，比如

hasAlertBeenShown=true

，然后每个警报在启动前都必须检查

hasAlertBeenShown=false

。@Leon检查我的答案！