时间戳

首页 > 解决方案 > Ajax提交表单而不重新加载页面不起作用

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

问题描述

我正在尝试在不使用 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>

标签： jqueryajaxformsform-submitform-serialize

解决方案

这并不是直接意义上的“解决方案”，而是作为演示，您的代码实际上可以在您发布的版本中运行。我只添加了两个<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>

推荐阅读