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，然后返回响应。显示警报响应。即使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");
//add these lines
return false;

          }});
         });
      });

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");
  return false;

              }});
             });
          });



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

从Ajax调用获得响应后，表单会重新加载

3 个答案: