Question

注意：这是一个jQuery编码练习，我不允许使用插件或其他模块。

我有一个提交到php页面的jQuery表单。此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>

示例场景：

如果用户输入已经拍摄的电子邮件

电子邮件已在使用中，请使用其他电子邮件。

获取输出。如果用户修改了条目并重新提交表单，则会打印以下内容：

电子邮件已在使用中，请使用其他电子邮件完整

如何使用更新后的响应删除旧的响应数据，我该怎么解决这个问题？

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

我希望这可以帮到你。

jQuery ajax表单提交响应在重新提交时没有改变

2 个答案: