jQuery - ошибка метода POJ метода Ajax,

Question

Я экспериментирую с простым AJAXing, используя jQuery. Я отправляю пустые данные на страницу .php, затем повторяю данные, закодированные JSON, на страницу, где находится мой javascript.

Я получаю ошибку, делая это, но я не могу понять, почему этот код производит ошибку ..

Вот код, который я написал,

index.php

<form id="getData"> 
     <button name="control" type="submit" value="A">GET DATA</button> 
    </form> 

    <form id="showData"> 
     <button name="control" type="submit" value="A">SHOW DATA</button> 
    </form> 
    <div id="results"></div> 
    <div id="map"></div> 

    <script> 
    $("document").ready(function(){ 
     $("#getData").submit(function(event){ 

      $.ajax({ 
       url : "/getVehiclePosition.php", 
       type: "POST", 
       data: "", 
       success: function(data, textStatus, jqXHR) 
       { 
        //data - response from server 
        console.log("Hooray, it worked!"); 
        $('#results').append(data); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        console.error(
         "The following error occurred: "+ 
         textStatus, errorThrown 
        ); 
       } 
      }); 

     }); 
    }); 
    </script> 

в консоли Chrome, я получаю следующее сообщение об ошибке ..

The following error occurred: error 
error @ ?control=A:52 
i @ jquery-1.12.2.min.js:2 
fireWith @ jquery-1.12.2.min.js:2 
y @ jquery-1.12.2.min.js:4 
c @ jquery-1.12.2.min.js:4 

По какой-то причине, если я вытащил форму отправки, привязывающую к #getDATA, она снова работает хорошо. Потянув мои волосы в данный момент, пожалуйста, помогите !. Спасибо заранее.

[ДОПОЛНЕНО] =============================================================== ======================== Захваченные XHR,

Answer 1

Вы не прекращались форму от представления его действия по умолчанию так что вы можете реализовать свой запрос ajax. Используйте event.preventDefault() перед вашим ajax.

$("document").ready(function(){ 
     $("#getData").submit(function(event){ 
      event.preventDefault(); 

      $.ajax({ 
       url : "/getVehiclePosition.php", 
       type: "POST", 
       data: "", 
       success: function(data, textStatus, jqXHR) 
       { 
        //data - response from server 
        console.log("Hooray, it worked!"); 
        $('#results').append(data); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) 
       { 
        console.error(
         "The following error occurred: "+ 
         textStatus, errorThrown 
        ); 
       } 
      }); 

     }); 
    });