Question

我的代码有一个ajax，可以调用几个asp.net webmethods，然后成功地将数据发送到数据库。

用户填写表单并单击“提交”按钮后，将显示一个进度条。

一旦流程完成，隐藏进度条并且＆＃34; 谢谢，数据已成功添加＆＃34;消息显示。

到目前为止，非常好。

问题是，只要我添加了一行代码，location.reload()在提交后重新加载页面，就会不再显示成功消息和进度条。

任何想法为什么？

$("#btnSubmit").click(function (event) {
    event.preventDefault();
    if (confirm('Please verify that your information is correct before submitting. Click Ok to submit, Click 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");
            }
        }

        var $loading = $('#loadingDiv').hide();
        $(document)
            .ajaxStart(function () {
                $loading.show();
            })
            .ajaxStop(function () {
                $loading.hide();
                location.reload();
            });

        $("#result").text("");
        var data = JSON.stringify(getAllEmpData());
        console.log(data);
        $.ajax({
            url: 'closures.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 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 () {
                sourceComplete = true;
                checkComplete();
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
    }
});
...
...
<input type="submit" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm" value="Submit" />
<img id="loadingDiv" style="display:none;" src="images/ajax-loader.gif" alt="Loading..." />
<output id="result" style="margin-bottom:300px;margin-left:250px;color:#3c890e;font-weight:bold;font-size:18px;"></output>

Answer 1

将数据处理保留在success中。但是在Ajax的complete上移动隐藏代码（当一切都完成时）。例如：

$.ajax({
    url: 'closures.aspx/SaveEmpData',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ 'empdata': data }),
    async: false,
    success: function () {
        empComplete = true;
    },
    error: function () {
        alert("Error while inserting data");
    },
    complete: function () {
        checkComplete();
    }
});

我无法测试代码，因为它不是完整的解决方案。但我做了一些可能对你有帮助的改变：

$("#btnSubmit").click(function (event) {
    event.preventDefault();
    if (confirm('Please verify that your information is correct before submitting. Click Ok to submit, Click 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");
                $loading.hide();
                location.reload();
            }
        }

        var $loading = $('#loadingDiv').hide();

        $("#result").text("");
        var data = JSON.stringify(getAllEmpData());
        console.log(data);

        $.ajax({
            url: 'closures.aspx/SaveEmpData',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ 'empdata': data }),
            async: false,
            beforeSend: function () {
                $loading.show();
            },
            success: function () {
                empComplete = true;
            },
            error: function () {
                alert("Error while inserting data");
            }
        });

        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 () {
                sourceComplete = true;
            },
            complete: function () {
                checkComplete();
            },
            error: function () {
                alert("Error while inserting data");
            }
        });
    }
});

在显示成功消息之前页面重新加载

1 个答案: