Question

我有一个小表格，提交是通过AJAX。提交后，PHP回显进来但表单已消失。但是当显示回声时，表单应该保留在页面上。我怎么能这样做？

$(document).ready(function() {
  $('.subscribe_newsletter').click(function(e) {
    e.preventDefault();
    $('#subscribe_newsletter').val($(this).val());
    var data = $("#subscribe").serialize();
    $.ajax({
      type: 'POST',
      url: 'email_subscribe.php',
      data: data,
      success: function(data) {
        $(".subscribe_wrapper").fadeIn(500).show(function() {
          $(".subscribe_wrapper").html(data);

        });
      }
    });
    return false;
  });
});

<div id="form" class="subscribe_wrapper"></div>
  <form id="subscribe" method="POST">
    <input name="email_subscribe" type="text" />
    <input class="subscribe_newsletter" id="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
  </form>

这是php文件email_subscribe.php：

// subscribe 
if (isset($_POST['email_subscribe'])) {   
  $email_add = $_POST['email_subscribe'] . ',' . "\n";
  $store = file_put_contents('database-email.txt', $email_add, FILE_APPEND | LOCK_EX);
  if($store === false) {
    die('There was an error writing to this file');
  }
  else {
    ?>
    <div class="alert alert-success">
      <?php echo $_POST['email_subscribe'] . 'is added to the list!'; ?>
    </div>
    <?php
  }
}

那么如何在请求后确保表单保持可见？

Answer 1

替换此行：

<input class="subscribe_newsletter" id="subscribe_newsletter" type="submit" name="submit" value="Subscribe">

用这个：

<button class="subscribe_newsletter" id="subscribe_newsletter" type="button">Subscribe</button>

type="button"会使表单无法提交

如何在AJAX请求后保持表单显示

1 个答案: