Добавление изображения загрузки в пост jjery 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

Просто добавьте несколько звонков, чтобы скрыть / показать экран загрузки / деления:

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

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