Ajax form send error

Question

У меня есть form, который отправляет данные на сервер. Когда форма является обычным HTML, она отлично работает. Все данные отправляются на сервер без ошибок. Однако, когда я меняю форму на использование AJAX, я получаю сообщение об ошибке.

<form id="form" action="handler.php" method="POST"> <!-- it's work --> 
    <input id="contact_name" type="text" name="name" placeholder="NAME"> 
    <input id="contact_phone" type="text" name="phone" placeholder="PHONE"> 
    <button type="submit">Get call</button> 
</form> 

$(document).ready(function() { 
    /*this does not work*/ 
    $('#form').on('submit', function(e) { 
     var dataf = $(this).serialize(); 
     $.ajax({ 
      url: 'handler.php', 
      type: 'POST', 
      data: dataf, 
      success: function(response) { 
       console.log(JSON.stringify(response)); 
      }, 
      error: function(response) { 
       console.log(JSON.stringify(response)); 
      } 
     }); 
    }); 
}); 

В консоли я получаю это:

{"readyState":0,"responseText":"","status":0,"statusText":"error"} 

Answer 1

Вы должны добавить e.preventDefault();

$(document).ready(function(){/*this does not work*/ 
    $('#form').on('submit', function(e) { 
    e.preventDefault(); 
    var dataf = $(this).serialize(); 
     $.ajax({ 
     url: 'handler.php', 
     type: 'POST', 
     data: dataf, 
     success: function(response) { 
      console.log(JSON.stringify(response)); 
     }, 
     error: function(response) { 
      console.log(JSON.stringify(response)); 
     } 
     }); 
    }); 
}); 

Answer 2

<button type="submit">Get call</button>

должен быть

<button type="button">Get call</button>

Поскольку вы отправляете его вручную через jQuery.