将加载图像添加到 jquery ajax 帖子中

Question

我有以下 javascript 通过 ajax 发布表单而不刷新屏幕。由于帖子需要一段时间，我想在处理过程中添加加载图像。

我看到 这篇文章 但它似乎只列出了 . 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>

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>

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);