javascript - 单击警告框上的取消后，ajax 调用仍会发布到数据。为什么？

Question

我有几个 ajax 调用，在单击提交按钮时通过 web 方法将数据发布到数据库。

当用户点击提交按钮时，会弹出一个警告框，要求用户在提交到数据库之前验证他/她的订单。

当一切正常并且用户单击提交按钮时，数据已成功发布到数据库。

这部分工作正常。

问题是当用户单击“取消”时，数据仍会发布到数据库，尽管这次是将空白记录发布到数据库。

我的问题是为什么当用户点击取消时数据仍然被发布？

单击“取消”选项不应触发 ajax 调用。

我错过了什么？

这里是相关代码。如果需要，将提供更多代码。

function getAllCreditorData() {
        var data = [];
        $('tr.data-contact-person8').each(function () {
                var creditname = $(this).find('.creditorname01').val();
                var creditaddress = $(this).find('.creditoraddress01').val();
                var creditincome = $(this).find('.creditorincome01').val();
                var alldata = {
                        'myCreditorname': creditname,
                        'myCreditoraddress': creditaddress,
                        'myCreditorincome': creditincome
                }
                data.push(alldata);
        });
        console.log(data);
        return data;
}

$("#btnSubmit").click(function (event) {
        event.preventDefault();
        if (confirm('Please review your order before submitting. Click Ok to submit; Cancel to make additional changes')) {
                var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false;
                function checkComplete() {
                        if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) {
                                $("#result").text("Thank you! You have successfully completed this form");
                        }
                }
        }
        $("#result").text("");
        var data = JSON.stringify(getAllEmpData());
        console.log(data);
        $.ajax({
                url: 'disclosures.aspx/SaveEmpData',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ 'empdata': data }),
                async: false,
                success: function () {
                        empComplete = true;
                        checkComplete();
                },
                error: function () {
                        alert("Error while inserting data");
                }
        });

谢谢你的帮助

Answer 1

您的 ajax 调用超出了您的 if 条件。

$("#btnSubmit").click(function (event) {
    event.preventDefault();
    if (confirm('Please review your order before submitting. Click Ok to submit; Cancel to make additional changes')) {
        $.ajax({
            url: 'disclosures.aspx/SaveEmpData',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'empdata': data }),
            async: false,
            success: function () {
                    empComplete = true;
                    checkComplete();
            },
            error: function () {
                    alert("Error while inserting data");
            }
    });

            var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false;
            function checkComplete() {
                    if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) {
                            $("#result").text("Thank you! You have successfully completed this form");
                    }
            }
    }
    $("#result").text("");
    var data = JSON.stringify(getAllEmpData());
    console.log(data);