вложенный $ .ajax во внутрь $ .ajax - очень странная проблема

Question

вложенный $ .ajax во внутрь $ .ajax - очень странная проблема

0

Начнем здесь - я определил базовую настройку для всех будущих AJAX-запросов, например

$.ajaxSetup({
  beforeSend : function(){
      $("#ajax-loader").dialog({
         modal : true 
      });
  },

  complete : function(){
     $("#ajax-loader").dialog("hide");
  }
});

Теперь у меня есть форма, где мои пользователи могут загружать свою биографию и фотографии. Когда форма действительна, я разрешаю загружать их фотографии. Он работает следующим образом:

$("#send").click(function(e){
   e.preventDefault();

   $.ajax({
      data : $("#bio-form").serialize(),
      url : "/validate.ajax",
      success : function(response) {
        // If AJAX-validator returns "1" then a form is valid  
        if (response == "1"){

            // Now I start to upload photos, like
            // this

            var formData = new FormData(document.getElementById('upload-form'));

            $.ajax({
               processData  : false,
               contentType  : false,
               cache    : false,
               data         : formData,
               success : function(response) {
                  alert(response);
               }
            });
        }
      }
   });

});

Проблема

После запуска ajax-загрузки, я ожидаю, что будет показан $("#ajax-loader"). По завершении это должно быть автоматически закрыто в соответствии с настройками, указанными в $.ajaxSetup.

НО... Он появляется и исчезает сразу после 1 секунды при загрузке файла. Я знаю, что запрос ajax не завершен, потому что я получаю успешное сообщение через 1-2 минуты (эти фотографии загружены).

Я попытался изменить async: false и он начал работать так, как ожидалось. === Модаль появляется при загрузке файлов на сервер и исчезает, когда это делается:

data        : formData,
async       : false,
processData : false,

Вопрос

Возможно ли это сделать, если async: true установлен режим по умолчанию (true)? Я не хочу, чтобы браузер был заморожен при загрузке!

HILARUDEEN ALLAUDEEN 03 дек. 2013, в 13:19

Источник

0

Большая проблема здесь в том, что Ajax асинхронный - он не будет ждать завершения вашего другого Ajax
Richard Peck 03 дек. 2013, в 11:59

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Большая проблема здесь в том, что Ajax асинхронный - он не будет ждать завершения вашего другого Ajax

HILARUDEEN ALLAUDEEN · Answer 1 · 2013-12-03T10-02-00.000Z

Проблема заключается в ajaxSetup. Вы должны следовать методу включения/выключения при загрузке фотографии. Позвольте мне понять понимание. Вы хотите показать загрузчику, чтобы проинформировать пользователя о том, что он/она должен ждать завершения процесса проверки. Как только проверка будет успешной, вы начнете загружать файл. При загрузке файла вы хотите разрешить пользователю взаимодействовать со страницей.

Чтобы достичь этого, вам нужно сделать следующее:

function ajaxSetup(mode) {
    var options = {};
    if (mode === "on") {
        options = {
            beforeSend : function() {
                $("#ajax-loader").dialog({
                    modal : true
                });
            },

            complete : function() {
                $("#ajax-loader").dialog("hide");
            }
        };
    } else {
        options = {
            beforeSend : function() {
            },

            complete : function() {
            }
        };
    }
    $.ajaxSetup(options);
}

И сделайте свой запрос ajax следующим образом:

ajaxSetup("on");
$("#send").click(function(e) {
    e.preventDefault();

    $.ajax({
        data : $("#bio-form").serialize(),
        url : "/validate.ajax",
        success : function(response) {
            // If AJAX-validator returns "1" then a form is valid
            if (response == "1") {

                // Now I start to upload photos, like
                // this

                var formData = new FormData(document.getElementById('upload-form'));
                ajaxSetup("off"); //Here second-time seem-less displaying of loader will be avoided.
                $.ajax({
                    processData : false,
                    contentType : false,
                    cache : false,
                    data : formData,
                    success : function(response) {
                        alert(response);
                    }
                });
                ajaxSetup("on");
            }
        }
    });
});

Примечание. Я не тестировал код. Убедитесь, что при наличии синтаксиса или ошибки опечатки.

Richard Peck · Answer 2 · 2013-12-03T09-09-00.000Z

Как вы обнаружили, Ajax - это асинхронная технология - это означает, что она работает по собственному расписанию

Создание синхронного Ajax вызывает всевозможные проблемы (использование async:false фактически заставляет браузер замораживаться во время выполнения запроса)

Есть несколько вопросов, которые я хотел бы упомянуть, вы можете исправить:

Почему вложенные Ajax?

Вложенные запросы Ajax, в этом текущем состоянии сети, являются, на мой взгляд, плохими. Обычно это означает, что у вас что-то не так с вашей системой. Параллельные запросы в порядке, но вложенные я бы избегал, как чума

Ajax Callbacks

Если вы можете получить ваши запросы Ajax до одного объекта, я бы посмотрел на использование Ajax Callbacks, чтобы создать желаемый результат

Ajax обратные вызовы работают с использованием Ajax как части функции, где обратные вызовы с успешным и обратным вызовом обрабатываются несколькими различными частями вашей родительской функции. Вот пример:

 function create_modal(o){

        fetch_modal(o.ajax, function(data){
           //do success stuff here
        }, function(data){
           //do error stuff here
        });

 }

 function fetch_modal(link, success, error) {
     $.ajax({
        url: link,
        success: function(data) { success(data); },
        error: function(data)   { error(data); }
     });
 }