Jquery 当ajax正在处理且请求尚未完成时，如何显示另一个DIV？

有两个Div:

contentDiv

和

progressDiv

。我使用ajax以以下方式提交数据。 对于ajax的完成，可能需要很多时间，因为我使用ajax上传不同的数据，包括多个图像，所以ajax完成可能需要15-20秒

当ajax正在进行时，我想向用户显示

progressDiv

，表明正在进行提交。我试图在不同的地方显示和隐藏div，比如在函数调用时，

beforeSend

ajax函数，成功时，出错时，但问题是

progressDiv

不显示，contentDiv不隐藏

我应该做哪些更改，以便在处理ajax时，向用户显示

progressDiv

？

 function submitButtonClick() {
        // on button click I inserted timeout function to hide contentDiv and show 
        // progressDiv but these codes don't execute

        setTimeout(function () {
            document.getElementById("progressDiv").style.display = "block";
            document.getElementById("contentDiv").style.display = "none";
        }, 400);

        $.ajax({
            type: "POST",
            url: "Home/SubmitData",
            data: formdata,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
               // on beforeSend function also, I inserted timeout function to hide contentDiv and show 
               // progressDiv but these codes don't execute
            beforeSend: function (xhr, status) {
                document.getElementById("progressDiv").style.display = "block";
                document.getElementById("contentDiv").style.display = "none";
            },
            success: function (xhr) {
                if (xhr.success == true) {
                    setTimeout(function () {
                        document.getElementById("progressDiv").style.display = "none";
                    }, 1500);

                    alert(xhr.messsage);
                    window.location.href = '@Url.Action("Index", "Home")';
                } else {
                    document.getElementById("progressDiv").style.display = "none";
                    document.getElementById("contentDiv").style.display = "block";
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                setTimeout(function () {
                    document.getElementById("myprogress1").style.display = "none";
                    document.getElementById("mainwizard").style.display = "block";
                }, 1500);

                alert('Sorry! Error occured while saving data');
            }
        });
   }

---

成功时，您已将window.location.href设置为主页，在您的页面中，将ajax数据发送到SubmitData页面需要几秒钟的时间，因此您希望能够看到progressDiv显示……将“window.location.href=”@Url.Action（“Index”，“home”）；”在setTimeout函数中，查看发生了什么，您可以使用完整函数或发送回调函数作为参数