Как отключить кнопку отправки и показать изображение загрузки, когда выполняется вызов jquery ajax?

Question

Следующий код НЕ работает.Кнопка не отключена, загрузочное изображение не отображается, и вместо этого вся страница блокируется во время вызова AJAX.

JavaScript:

$(function() {
    $("#submitButton").click(function() {
        // Disable the submit button
        $(this).attr("disabled", "disabled");

        // Show the loading image
        $(".loading").show();

        // Serialize the form values for AJAX submission
        var $formParamsString = $(this).closest("form").serialize();

        $.ajax({
            type: "POST",
            url: "myService.cfm",
            dataType: "JSON",
            data: $formParamsString,
            async: false,
            success: function(data) {
                alert("Form values saved!")
            },
            error: function() {
                alert("Form values not saved!")
            }
        });

        // Hide the loading image
        $(".loading").hide();

        // Re-enabled the submit button
        $(this).removeAttr("disabled");

        // Prevent form post
        return false;
    });
});

HTML:

<input
    id="submitButton"
    name="submitButton"
    type="submit"
    value="Submit"
    class="submitButton" />
<span class="loading"></span>

CSS:

.loading {
    background: url("/images/loading.gif");
}

Answer 1

Браузер зависает, и ничего не происходит, потому что вы отправляете синхронный запрос (async: false), см. документы :

Обратите внимание, что синхронные запросы могут временно заблокировать браузер,отключение любых действий при активном запросе

Для достижения вашей цели вам необходимо:

1. сделать запрос асинхронным (удалить async: false),

2. переместите этот код:

   // Hide the loading image
   $(".loading").hide();
   
   // Re-enabled the submit button
   $(this).removeAttr("disabled");
   

   к вашим success и error функциям

3. sumbit вручную в функции success ($('#form').submit()).

Answer 2

Итак, в основном вы делаете

1) отключение вашей кнопки и показ изображения

2) запуск асинхронного события

3) немедленное включение вашей кнопкиеще раз и скрывая изображение

Вызов ajax, который вы делаете, не повесит функцию, из которой вы его вызываете.Функция вызывается в отдельном потоке, и поэтому изображение отключается / включается так быстро, что вы даже не можете сказать.Что вам нужно сделать, так это прикрепить функции к событиям ajax, которые предоставляет jQuery.

Вы можете прикрепить событие к исходному событию вызова ajax, которое отключит кнопку и покажет изображение загрузки, а затем прикрепить событие кчасть завершения вызова, которая снова включит вашу кнопку и избавится от изображения.

Для этого вам нужно сделать два варианта:

1) Расположить эффекты манипуляции кнопкой и изображениемв событиях .success и .fail, которые прикреплены к вашему отдельному вызову ajax

2) Присоедините функции к событиям .ajaxStart и .ajaxComplete, которые отображаются на странице.Однако, это сделает то же самое для всех вызовов ajax на странице.Более подробную информацию можно найти здесь: http://api.jquery.com/category/ajax/

Answer 3

Одной из проблем является то, что вызов AJAX не завершается, когда вы скрываете загрузочный образ и удаляете отключенный атрибут, поскольку по определению вызовы AJAX являются (A) синхронными.Вы должны сделать атрибут скрытия и удаления в своих функциях обратного вызова.