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

Question

我正在为我的应用开发课程开发一个网站，我有一个最奇怪的问题。

我正在使用一些JQuery将表单数据发送到名为＆＃39; process.php的php页面，然后将其上传到我的数据库。奇怪的错误是页面在提交表单时重新加载，我不能或我的生活中弄清楚如何让JQuery继续在后台运行。这首先是使用JQuery的重点哈哈。无论如何，我会提交所有相关代码，如果您还有其他需要，请告诉我。

<script type="text/JavaScript">

$(document).ready(function () {
  $('#button').click(function () {

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

    $.post("process.php", {
      name: name,
      email: email
    }).complete(function() {
        console.log("Success");
      });
  });
});
</script>
<div class= "main col-xs-9 well">
  <h2 style="color: black" class="featurette-heading">Join our mailing list!</h2>
  <form id="main" method = "post" class="form-inline">
    <label for="inlineFormInput">Name</label>
    <input type="text" id="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
    <label for="inlineFormInputGroup">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <input type="text" id="email" class="form-control" id="inlineFormInputGroup" placeholder="janedoe@email.com">
    </div>
    <!--Plan to write success message here -->
    <label id="success_message"style="color: darkred"></label>
    <button id ="button" type="submit" value="send" class="btn btn-primary">Submit</button>
  </form>

这是我的php如果相关：

<?php
  include 'connection.php';

  $Name = $_POST['name'];
  $Email = $_POST['email'];

  //Send Scores from Player 1 to Database 
  $save1   = "INSERT INTO `contact_list` (`name`, `email`) VALUES ('$Name', '$Email')";

  $success = $mysqli->query($save1);

  if (!$success) {
    die("Couldn't enter data: ".$mysqli->error);

    echo "unsuccessfully";
  }

  echo "successfully";
?>

这是日志的屏幕截图：

Answer 1

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

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

解决方案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's documentation，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");
    });
  });
});