Формы получают перезагрузку после получения ответа от вызова Ajax

Question

Я тестирую сервлет, вызывающий через ajax функциональность простой программой. Здесь у меня есть форма, которая имеет одно текстовое поле и один div, который имеет некоторый текст.

Моя программа примет ввод от пользователя через текстовое поле и заменяет текст внутри тега div.

Ниже форма:

<form> 
    <br /> Enter your Name: <input type="text" id="userName" /> 
    <button type="submit">Submit</button> 
    <div id="div1">Text to be replaced</div> 
</form> 

Ниже один является Ajax вызов.

$(document).ready(function(){ 
$("form").submit(function(){ 
    var name = $('#userName').val(); 
    $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){ 
     alert(response); 
     $("#div1").html(response); 
     alert("yes"); 
     }}); 
    }); 
    }); 

На представить Аякс вызывает сервлет, и вернуть предупреждение ответа response.On становится displayed.Even значение div tag становится заменено. Но его исчезли.

Я думаю, что форма снова перезагружается после получения ответа. Если так, как остановить?

Или это что-нибудь еще?

Answer 1

Вы должны предотвратить действие по умолчанию, в виде представить, то представить:

$("form").submit(function(event){ 
    event.preventDefault(); 
    // all your stuff 
}); 

И это работает :)

Answer 2

$(document).ready(function(){ 

     $("form").submit(function(){ 
      var name = $('#userName').val(); 
      $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){ 
       alert(response); 
       $("#div1").html(response); 
       alert("yes"); 
    return false; 

       }}); 
      }); 
      }); 



add these lines return false; it will reload the current page. 

Answer 3

$(document).ready(function(){ 

    $("form").submit(function(){ 
     var name = $('#userName').val(); 
     $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){ 
      alert(response); 
      $("#div1").html(response); 
      alert("yes"); 
//add these lines 
return false; 

      }}); 
     }); 
     });