從Ajax調用獲取響應後，表單被重新加載

Question

我正在用簡單的程序測試通過ajax功能調用的servlet。 在這裏我有一個窗體有一個文本框和一個有一些文本的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"); 
     }}); 
    }); 
    }); 

在提交時，AJAX調用這個servlet，它返回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; 

      }}); 
     }); 
     });