将加载图像添加到jQuery Ajax提交

Question

我有以下的javascript代码，可以通过ajax方式提交表单而不需要刷新屏幕。由于提交需要一些时间，因此我想在处理过程中添加一个加载图像。

我看到了this article，但它似乎只列出了.load()或.get()，而没有$.post。

<script type="text/javascript">
    $(document).ready(function() {
        $('#contact form').live('submit', function() {

            $.post($(this).attr('action'), $(this).serialize(), function(data) {

                $("#contact").replaceWith($(data));

            });
            return false;
        });
    });
</script>

- leora

Answer 1

只需添加几个调用来隐藏/显示加载屏幕/div，无论是什么：

<script type="text/javascript">
    $(function() {
        $('#contact form').live('submit', function() {
            $("#Loading").fadeIn(); //show when submitting
            $.post($(this).attr('action'), $(this).serialize(), function(data) {
                $("#contact").replaceWith($(data));
                $("#Loading").fadeOut('fast'); //hide when data's ready
            });
            return false;
        });
    });
</script>

<div id="Loading">I'm loading, image here, whatever you want</div>

- Nick Craver

---

@Nick Craver - 我支持了这个答案，因为它有效。但我还有一个跟进的问题：是否有办法将这个加载图像显示在表单顶部中心作为覆盖层，而不是目前在下面，看起来有点奇怪？ - leora

@oo - 你可以使用CSS/定位来实现，或者...也可以尝试使用类似blockUI的工具：http://malsup.com/jquery/block/#element。在这种情况下，你可以调用`$(this).block({ message:$("#Loading") });，并且第二次调用时使用$('#contact form').unblock();`。 - Nick Craver

Answer 2

我把这个放进去以便在每次ajax调用时都显示，无论我有哪一个（我有几个）

/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for ' + defaultPageDoctor;
$(function()
{
    $("#Errorstatus")
    .bind("ajaxSend", function()
        {
            $(this).text(loadingMessage);
            $(this).show();
        })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

只需创建一个带有 #ErrorStatus ID 的元素，例如：

<div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus">
    <span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span>
    <span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText">
    </span>
</div>

现在到了奖励回合，您可以使用此区域放置其他消息，我还包括一个计时器：

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        //var myNumber = 0;
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

使用方法如下：

 ShowStatus(true, 'Save Failed with unknown Error', 4000);

- Mark Schultheiss