从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; 

      }}); 
     }); 
     });