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

您需要等待所有ajax请求完成，例如this answer

因此，在您的情况下，您需要为所有$ .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
    });
});

Answer 2

为什么要拨打3次按钮点击？为什么不把它们放在一起？任何如何使用变量asAlertToBeShown = false并且在推送数据之后使其成为真。最后检查变量是true还是false。

Answer 3

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

jQuery callback for multiple ajax calls

Answer 4

您还可以使用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"); }

        });
    })
  }

抑制SUCCESS警告框？

4 个答案: