如何在Ajax Post请求中保留表单字段值

Question

我正在使用一个嵌入了两个按钮的表单，第一次检查用户名可用性，另一个提交表单。这两种按钮类型都设置为按钮。

发出AJAX发布请求的第一个按钮（#btn-keywordCheck）将清除用户在成功提醒后输入的所有表单字段，这是不合需要的。后者（#btn-signup）按预期工作。有人能为我解决这个问题吗？

这里是jQuery脚本

$(document).ready(function(){ 

    $('#btn-keywordCheck').click(function(){ 
     $.ajax({ 
      url: "/reservedKeyCheck", 
      type : 'GET', 
      data : "keyword="+$("#keyword").val(), 
      async : false, 
      cache : false, 
      contentType : "application/x-www-form-urlencoded", 
      processData : false, 
      success: function(output){ 
      alert(output.success); 
      }, 
      error: function(jqXHR, textStatus, error){ 
      alert(error.message); 
      } 
    }); 
    }); 

    $('#btn-signup').click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "/signup", 
      data: $("#signupform").serialize(), 
      dataType: "json", 
      contentType : "application/x-www-form-urlencoded", 
       success: function(output){ 
       alert(output.success);    
       }, 
       error: function(jqXHR, textStatus, error){ 
       alert(error.message); 
       } 
    }); 
}); 

}); 

这里是HTML代码（我用的自举）

  <form id="signupform" class="form-horizontal" method="post" 
       role="form"> 

       <div id="signupalert" style="display: none" 
        class="alert alert-danger"> 
        <p>Error:</p> 
        <span></span> 
       </div> 


       <div class="form-group"> 
        <label for="orgname" class="col-md-4 control-label">Organization 
         Name</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" name="orgname" 
          placeholder="Full Name"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="keyword" class="col-md-4 control-label">Keyword</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" name="keyword" id="keyword" 
          placeholder="Short code identifier"> 
          <p></p> 
         <button id="btn-keywordCheck"class="btn btn-info">Check Availability</button> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="email" class="col-md-4 control-label">Email</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" name="email" 
          placeholder="Email Address"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="password" class="col-md-4 control-label">Set 
         Password</label> 
        <div class="col-md-7"> 
         <input type="password" class="form-control" name="password" 
          placeholder="Password"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="confirmPassword" class="col-md-4 control-label">Confirm 
         Password</label> 
        <div class="col-md-7"> 
         <input type="password" class="form-control" 
          name="confirmPassword" placeholder="Retype Password"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label for="phone" class="col-md-4 control-label">Phone 
         Number</label> 
        <div class="col-md-7"> 
         <input type="text" class="form-control" name="phone" 
          placeholder="Numbers only"> 
        </div> 
       </div> 

       <div class="form-group"> 
       <label for="address" class="col-md-4 control-label">Address</label> 
        <div class="col-md-7"> 
         <textarea class="form-control" name="address" rows="3" 
          placeholder="Optional" id="address"></textarea> 
        </div> 
       </div> 


       <div class="form-group"> 
        <!-- Button --> 
        <div class="col-md-offset-4 col-md-11"> 
         <button id="btn-signup" type="button" class="btn btn-info"> 
          <i class="icon-hand-right"></i> &nbsp Sign Up 
         </button> 
        </div> 
       </div> 


      </form> 

谢谢！

Answer 1

只需更改您的按钮单击侦听器并添加preventDefault();。当您单击查看按钮

$('#btn-keywordCheck').click(function(){ 
    $.ajax({ 
     url: "/reservedKeyCheck", 
     type : 'GET', 
     data : "keyword="+$("#keyword").val(), 
     async : false, 
     cache : false, 
     contentType : "application/x-www-form-urlencoded", 
     processData : false, 
     success: function(output){ 
     alert(output.success); 
     }, 
     error: function(jqXHR, textStatus, error){ 
     alert(error.message); 
     } 
    preventDefault(); 
}); 

编辑自己的网页正在刷新：如果这不起作用，你可能需要改变你的点击动作一点。

$('#btn-keywordCheck').on('click',function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: "/reservedKeyCheck", 
     type : 'GET', 
     data : "keyword="+$("#keyword").val(), 
     async : false, 
     cache : false, 
     contentType : "application/x-www-form-urlencoded", 
     processData : false, 
     success: function(output){ 
      alert(output.success); 
     }, 
     error: function(jqXHR, textStatus, error){ 
      alert(error.message); 
     } 
    }); 
});