Почему мой сценарий ajax перезагружает мою страницу

Question

Я использую ajax для отправки формы. Ну, сценарий, который я использую, - это просто проверить форму, где некоторый простой текст отражается в processform.php. Однако, когда я нажимаю кнопку «Отправить», ничего не получает предупреждения, и страница перезагружается.

is not that return false Предполагается, чтобы предотвратить его. И когда я удаляю часть ajax, все идет хорошо.

Где я делаю это неправильно?

$("#submit").click(function(){ 
     $("#sidebar .message").show(); 
     $(".sidebar-content").hide(); 

     $.ajax({ 
     type: "POST", 
     url: "processform.php", 
     data: { name: "John", location: "Boston" } 
     }).done(function(msg) { 
     alert("Data Saved: " + msg); 
     }); 

     return false; 
    }); 

Answer 1

Если элемент #submit находится кнопка или вход с type="submit", то, скорее всего, вызовет поведение по умолчанию для отправки данных независимо от формы действия, случается.

Вы можете либо изменить тип type="button", который не имеет поведения по умолчанию для отправки данных, либо использовать event.preventDefault() в обработчике кликов, чтобы заблокировать поведение по умолчанию.

$("#submit").click(function(e){ 
    e.preventDefault(); 
    ... 
}); 

Если вы хотите, чтобы ваше уведомление, чтобы вызвать, когда ваш запрос Ajax успешно, вы можете использовать success вариант вместо .done().

$("#submit").click(function() { 
    $("#sidebar .message").show(); 
    $(".sidebar-content").hide(); 

    $.ajax({ 
     type: "POST", 
     url: "processform.php", 
     data: { 
      name: "John", 
      location: "Boston" 
     }, 
     success: function(msg) { 
      alert("Data Saved: " + msg); 
     }, 
     error: function() { 
      alert("Error occurred"); 
     } 
    }); 

    return false; 
}); 

jsfiddle

Answer 2

Простое решение: изменить кнопку отправки "кнопку", чтобы ввести = вместо "отправить".