Ajax Form 'POST' result as 'GET'

Ajax Form 'POST' result as 'GET'

Hello everyone, I'm learning some Jquery on a website and I was trying to understand how does it work ajax used with forms. I created this simple form which should send all the data using POST:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Ajax Form</title>
  6. <script src="http://code.jquery.com/jquery-3.0.0.js"></script>
  7. </head>
  8. <body>
  9. <div class="row">
  10. <div class="col-md-12">
  11. <h1>Ajax Form</h1>
  12. <form>
  13. <label for="destinatio">Destinazione</label>
  14. <select name="destination" id="destionation">
  15. <option value="londra">londra</option>
  16. <option value="parigi">parigi</option>
  17. <option value="roma">roma</option>
  18. </select>
  19. <br>
  20. <input type="number" name="day">
  21. <br>
  22. <input type="submit" value="book">
  23. </form>
  24. <div class="tour"></div>
  25. </div>
  26. </div>
  27. </body>
  28.   <script type="text/javascript">
  29. $(document).ready(function(){
  30. $($('form').attr('action')).on('submit', function(event){
  31. event.preventDefault();
  32. var form = $(this);
  33. $.ajax('/book.html', {
  34. type: 'POST',
  35.   contentType: 'application/json',
  36. dataType:'json',
  37. data: form.serialize(),
  38. success: function(result){
  39. var msg = $('<p></p>');
  40. //msg.append()
  41.    $('.tour').html(result);
  42.    console.log(this.data)
  43. }
  44. });
  45. });
  46. });
  47. </script>
  48. </html>
The Problem is that if I look inside the Chrome developer tools, inside the Network panel, when I sumbit the form I see that: 

Also on the search bar at the top when I submit something i see the url changes like the data it's sent using GET like this:

Does anyone know why?