如何在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); 
     } 
    }); 
});