Последовательные вызовы AJAX добавляют дополнительный последовательный вызов

Question

У меня довольно стандартный вызов ajax для обновления в реальном времени, однако я говорю, что я называю ajax, все хорошо, но скажу, что я хочу позвонить ему снова, на этот раз я буду get 2 вызывает, и если я попробую еще раз, то у меня будет 3, я могу проверить это, вызывая и предупреждая и с помощью Network DevCon of Chrome, любую идею, почему это происходит?

PS: Я использую Laravel 5.1

$('button[name=act]').click(function() { 
    var icon = $(this).closest('div.thumbnail').find('i'); 

    $(document).ajaxStart(function() { 
     icon.show(); 
    }); 

    $("form").submit(function (e) { 

     e.preventDefault(); 

     var formData = new FormData($(this)[0]); 

     $.ajax({ 
      url: "ajax/acttdb", 
      data: formData, 
      dataType: "json", 
      type: "POST", 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function (data, status, jqXhr) { 
       $(icon).fadeIn(function() { 
        $(this).removeClass('fa-spinner fa-spin').addClass('fa-check text-success').fadeOut(1000, function() { 
         $(this).removeClass('fa-check text-success').addClass('fa-spinner fa-spin'); 
        }); 
       }); 
      }/*, 
       error: function (jqXhr, textStatus, errorThrown) { 
       console.log("Error response:", jqXhr.responseText); 
       }*/ 
     }); 
    }); 
}); 

Answer 1

Причина это происходит потому, что вы подмену отправки события функции каждый раз, когда нажата кнопка, которая приводит к нескольким копиям функции. Просто вытащите его из клика даже, и если вы хотите принудительно отправить отправить по клику, вы можете вызвать функцию submit() без параметров для запуска события.

Попробуйте следующее:

$(function(){ 
    $('button[name=act]').click(function(){ 
     var icon = $(this).closest('div.thumbnail').find('i'); 

     $(document).ajaxStart(function() 
     { 
      icon.show(); 
     }); 

     $("form").submit(); //This submits the form on click 
    }); 

    //This binds the function, so it should only be called once. 
    $("form").submit(function (e) 
    { 
     e.preventDefault(); 

     var formData = new FormData($(this)[0]); 

     $.ajax({ 
      url: "ajax/acttdb", 
      data: formData, 
      dataType: "json", 
      type: "POST", 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function (data, status, jqXhr) 
      { 
       //BLAH 
      } 
     }); 
    }); 
}); 

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

Кроме того, способ, которым вы в настоящее время располагаете, будет привязан ко всем формам на странице. Если у вас есть несколько форм на странице, вы, вероятно, захотите изменить селектор на использование идентификатора.

Надеюсь, это поможет!

Answer 2

Основываясь на дополнительных звонках и мое гадание, я должен сказать, что вы печатаете этот код каждый раз, когда вы делаете (AJAX) вызов, что приводит к свяжите ваш form элемент снова в каждом вызове. Я прав?

JO.

Answer 3

Проблема заключается в том, что каждый раз, когда вы нажимаете на кнопку act вы звоните $("form").submit(), which adds another представить handler to the form. So if you click on the кнопку act` 3 раза, а затем нажмите на кнопку отправки формы, он будет посылать 3 AJAX запросы.

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

var icon; 

$(document).ajaxStart(function() { 
    if (icon) { 
     icon.show(); 
    } 
}); 

$('button[name=act]').click(function() { 
    icon = $(this).closest('div.thumbnail').find('i'); 
}); 

$("form").submit(function (e) { 
    e.preventDefault(); 
    var formData = new FormData($(this)[0]); 
    $.ajax({ 
     url: "ajax/acttdb", 
     data: formData, 
     dataType: "json", 
     type: "POST", 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data, status, jqXhr) { 
      if (icon) { 
       icon.fadeIn(function() { 
        $(this).removeClass('fa-spinner fa-spin').addClass('fa-check text-success').fadeOut(1000, function() { 
         $(this).removeClass('fa-check text-success').addClass('fa-spinner fa-spin'); 
        }); 
       }); 
      } 
     }/*, 
      error: function (jqXhr, textStatus, errorThrown) { 
      console.log("Error response:", jqXhr.responseText); 
      }*/ 
    }); 
});