代码之家 › 专栏 › 技术社区 › leora Matt Lacey

将加载图像添加到jquery ajax post

loading-image ajax jquery

leora Matt Lacey · 技术社区 · 14 年前

我有下面的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>

2 回复 | 直到 14 年前

Nick Craver 14 年前

只需添加几个调用来隐藏/显示加载屏幕/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>

Mark Schultheiss 14 年前

我把它放进去,这样每次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();
        });
    });

Just create an element with the #ErrorStatus id such as:

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

Now for the bonus rounds, you can use this area to put other messages up, I also include a timer:

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