Ajax提交表单而不重新加载页面不起作用答案

【问题标题】：Ajax Submit form without reload the page is not workingAjax提交表单而不重新加载页面不起作用
【发布时间】：2018-12-06 17:00:05
【问题描述】：

我正在尝试在不使用 Ajax 重新加载页面的情况下提交表单，但到目前为止我还没有成功，它仍然会重新加载页面。在 index.php 上，我在下面有这段代码。有人可以帮忙吗？

<?php 
# form code
?>

<div>
  <form action="" method="post" autocomplete="off" id="theForm">
    <button type="submit" name="SeguA" />
      Seguir
    </button> 
  </form>
</div>

<script type="text/javascript">
  $(function() {
    $('#theForm').submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      });
    });
  });
</script>

【问题讨论】：

如果您打开开发工具，您是否看到任何错误？ (F12)
@KevinB 其实不是。
你的按钮关闭不正确，有关系吗？
@KevinB 这没有改变。
我没有发现任何其他问题。这是直接复制粘贴吗？ id全匹配？开发工具是否设置为同时显示错误和信息日志？您是否启用了保留日志，以便在提交表单时不会删除错误？

标签： jquery ajax forms form-submit form-serialize

【解决方案1】：

这并不是直接意义上的“解决方案”，而是作为一个演示，表明您的代码实际上可以在您发布的版本中运行。我只添加了两个<input> 元素和console.log() 行。

那么，问题可能出在您在此处发布的代码之外？

$('#theForm').submit(function(event) {
      event.preventDefault();
      var form = $(this);
      console.log(form.serialize());
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
  <form action="" method="post" autocomplete="off" id="theForm">
    <input type="text" name="a" value="some">
    <input type="text" name="b" value="thing">
    <button type="submit" name="SeguA" />
      Seguir
    </button> 
  </form>
</div>

【讨论】：

也许是因为我使用的是引导程序？你能试试吗？