jQuery ajax表單提交響應不會改變重新提交

Question

注意：這是一個jQuery編碼練習，我不允許使用插件或其他模塊。

我有一個jQuery表單被提交到一個php頁面。這個php頁面檢查電子郵件是否已被使用。如果沒有創建帳戶。

我不打算加入php頁面來降低複雜度。主要關注jQuery。

注：我使用的框架結構

HTML：

<div class="container"> 
    <form id="myForm" action="validate_signup.php" method="post"> 
     <div class="row"> 
     <div class="twelve columns"> 
      <h3 class="center">Sign Up</h3> 
     </div> 
     </div><!--end row--> 
     <div class="row"> 
     <div class="four columns offset-by-four"> 
      <input class="u-full-width" type="email" placeholder="Email" id="email" name="email"> 
      <span class="error">Email not entered</span> 
     </div> 
    </div><!--end row--> 
    <div class="row"> 
     <div class="four columns offset-by-four"> 
      <input class="u-full-width" type="password" placeholder="Password" id="pword" name="pword"> 
      <span class="error">Password not entered</span> 
     </div> 
     </div><!--end row--> 
     <div class="row"> 
     <div class="four columns offset-by-four"> 
      <input class="u-full-width" type="text" placeholder="First Name" id="fname" name="fname"> 
      <span class="error">First Name not entered</span> 
     </div> 
    </div><!--end row--> 
    <div class="row"> 
     <div class="four columns offset-by-four"> 
      <input class="u-full-width" type="text" placeholder="Last Name" id="lname" name="lname"> 
      <span class="error">Last Name not entered</span> 
     </div> 
     </div><!--end row--> 
     <div class="row"> 
     <div class="six columns offset-by-four"> 
      <input class="button-primary" type="submit" value="Submit" name="signup"> 
     </div> 
     </div><!--end row--> 
    </form> 
    <div class="row"> 
     <div class="twelve columns"> 
      <p id="response" class="center no-display"></p> 
     </div> 
    </div> 
    </div><!--end container--> 
    <script src="../js/jquery.js"></script> 
    <script src="../js/signup.js"></script> 

的jQuery：

// jQuery form validation 
$(document).ready(function(){ 

    // field mapping 
    var form_fields = { 
     'email' : 'email', 
     'pword' : 'password', 
     'fname' : 'first name', 
     'lname' : 'last name' 
    }; 

    // ajax data 
    var ajaxData = {}; 

    // make sure form fields were entered 
    $('#myForm').on('submit', function() { 

     for (var field in form_fields) { 
      if (!$('#' + field).val()) { 
       $('#' + field).next().addClass('error_show'); 
      } else if ($('#' + field).val()) { 
       $('#' + field).next().removeClass('error_show'); 
       ajaxData[field] = $('#' + field).val(); 
      } 
     } 

     // signup post field to indicate to php submission 
     ajaxData['signup'] = 'Submit'; 

     // send data if it is all there 
     if (Object.keys(ajaxData).length === 5) { 
      var request = $.ajax({ 
       url   : 'validate_signup.php', 
       method  : 'POST', 
       data  : ajaxData, 
       dataType : 'html' 
      }); 

      request.done(function(response) { 
       $('#response') 
       .append(response) 
       .show('slow'); 
      }); 

     } 

     return false; 

    }); 

}); 

問題主要HTML行，其中的響應會打印爲：

<div class="row"> 
     <div class="twelve columns"> 
      <p id="response" class="center no-display"></p> 
     </div> 
</div> 

示例場景：

如果已經採取

Email already in use, please use another.

在電子郵件用戶類型獲取輸出。如果用戶修改條目，並重新提交形式的下獲得印刷：

Email already in use, please use another.sign up complete

我該如何解決這個問題，我與更新的響應刪除舊的響應數據？

Answer 1

當您致電.append()時，您將向元素的主體添加更多內容。相反，您可以撥打.html()來替換元素的主體。

你可以改變：

$('#response').append(response).show('slow'); 

要：

$('#response').html(response).show('slow'); 

但我認爲它會更好，只是讓Ajax調用之前調用.hide()和.empty()。

$('#response').hide().empty(); 

這樣舊響應只要點擊提交按鈕消失，它會再慢慢動畫AJAX調用返回時。

Answer 2

給在HTML您的錯誤元素的ID：

<div class="four columns offset-by-four"> 
     <input class="u-full-width" type="email" placeholder="Email" id="email" name="email"> 
     <span class="error">Email not entered</span> 
     <span id="requestError"></span> 
    </div> 

與Ajax調用成功和錯誤功能，可以顯示接收到的錯誤：

var request = $.ajax({ 
       url   : 'validate_signup.php', 
       method  : 'POST', 
       data  : ajaxData, 
       dataType : 'html', 
       success  : function(data) { 
        $('#requestError').html(data); 
       }, 
       error  : function() { 
        $('#requestError').html("Error while AJAX"); 
       } 
      }); 

我希望能幫助您。