<button>除非另有说明，否则该元素在放置在表单中时将自动提交表单。您可以使用以下两种策略：

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

解决方案1：

• 优点：对标记的简单更改
• 缺点：颠覆了默认的表单行为，尤其是在禁用 JS 的情况下。如果用户想点击“回车”提交怎么办？

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