如何防止表单提交后页面重新加载 - JQuery

除非另有指定，否则放置在表单中的元素将自动提交表单。您可以使用以下 2 种策略：<button>

1. 用于覆盖默认提交行为<button type="button">
2. 在提交时事件中使用以防止表单提交event.preventDefault()

解决方案 1：

• 优点：简单更改标记
• 缺点：破坏默认表单行为，尤其是在禁用 JS 时。如果用户想要点击“Enter”进行提交，该怎么办？

在按钮标记中插入额外的属性：type

<button id="button" type="button" value="send" class="btn btn-primary">Submit</button>

解决方案 2：

• 优点：即使禁用了JS，表单也可以工作，并且遵循标准表单UI / UX，以便至少使用一个按钮进行提交

单击按钮时阻止默认表单提交。请注意，这不是理想的解决方案，因为您实际上应该侦听提交事件，而不是按钮单击事件：

$(document).ready(function () {
  // Listen to click event on the submit button
  $('#button').click(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

更好的变体：

在此改进中，我们侦听从元素发出的提交事件：<form>

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    e.preventDefault();

    var name = $("#name").val();
    var email = $("#email").val();

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});

更好的变体：使用 .serialize（） 序列化表单，但请记住向输入添加属性：name

该属性是工作所必需的，根据jQuery的文档：name.serialize()

对于要包含在序列化字符串中的表单元素的值，该元素必须具有 name 属性。

<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="janedoe@email.com">

然后在你的JS中：

$(document).ready(function () {
  // Listen to submit event on the <form> itself!
  $('#main').submit(function (e) {

    // Prevent form submission which refreshes page
    e.preventDefault();

    // Serialize data
    var formData = $(this).serialize();

    // Make AJAX request
    $.post("process.php", formData).complete(function() {
      console.log("Success");
    });
  });
});

加载页面时清除以前的状态....将其添加到 document.ready 函数。

if ( window.history.replaceState ) {
    window.history.replaceState( null, null, window.location.href );
}