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"); 
       } 
      }); 

我希望能帮助您。