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

Question

我正在为我的应用程序开发类(class)开发一个网站，但我遇到了一个最奇怪的问题。

我正在使用一些 JQuery 将表单数据发送到名为“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>元素，当放置在表单中时，除非另有说明，否则将自动提交表单。您可以使用以下 2 种策略:

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

解决方案一:

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

插入额外的 type属性到您的按钮标记:

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

方案二:

• 优点:即使禁用 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输入的属性:

name .serialize() 需要属性工作，按照 jQuery's documentation :

For a form element's value to be included in the serialized string, the element must have a name attribute.

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