Почему ajax запрос не срабатывает с первого раза?

Question

[poimanoo]

Здравствуйте. Подскажите пожалуйста, почему ajax-запрос по нажатии на кнопку срабатывает через раз? В первый раз всегда не срабатывает, бывает много раз кряду не работает. Заметил одну особенность - если через режим разработчика заполнять поля формы и нажать на кнопку, то там со второго раза почти всегда срабатывает. В общем, точной закономерности не выявил, поэтому пишу все что заметил. Под словом срабатывает я имею в виду, что выполняется код из блока success(в моем примере это переход на другую страницу), в остальных же случаях выполняется код из блока error. Буду признателен за любые советы. Код:

<form>
    <input id="email" class="auth-input" placeholder=" EMAIL"></input><br></br>
    <input id="pass" class="auth-input" placeholder=" Пароль"></input><br></br>
    <input class="auth-input" placeholder=" Повторите пароль"></input><br></br>
    <label><input type="checkbox"> Я принимаю условия <a href="#">пользовательского соглашения</a></label><br><br>
    <button class="auth-button">Зарегистрироваться</button>
</form>

$('.auth-button').on('click', function() {
  $.ajax
  ({ 
      url:"example.com",
      type:"POST",
      data:JSON.stringify({"email": $('#email').val(),"password": $('#pass').val()}),
      contentType:"application/json",
      dataType:"json",
      success: function(){
          window.location = "example.com";
      },
      error: function(xhr, status, error) {
          alert(xhr.ResponseText);
      }
  });
});

Answer 1

[Артем Спиридонов]

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  $.post($(this).attr('action'),$( this ).serialize(), callbacks);
});

Comments

[poimanoo]

Спасибо большое. А Вы не могли бы буквально в двух словах сказать что именно этот код делает и нужен ли он во всех подобных случаях при ajax-запросах или этот тут специфика какая-то особенная?

[Артем Спиридонов]

poimanoo, он ориентирован именно на форму. Ловит событие формы submit, собирает данные из формы и упаковывает их в JSON.

Обработчик формы в две строки. jQuery классный.

Основной дефект алгоритма, который вы привели в вопросе - это содержащиеся в алгоритме данные. Данные нужно отделять от обработки. Какие именно поля, какие названия - все это тоже данные.

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

event.preventDefault(); предотвращает дефолтное поведение объекта, событие которого получает обработчик

callbacks() должна содержать колбеки.

[poimanoo]

Артем Спиридонов, еще раз большое спасибо!

[Артем Спиридонов]

poimanoo, всё для вас! =)

[Артем Спиридонов]

poimanoo, вот, вспомнил.... Абстрагирование данных от обработки описано в книге "Чистый код".