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

Question

我正在为我的应用程序开发类开发一个网站,我有一个最奇怪的问题.

我使用一些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>元件中,当放置在一个形式中,将自动提交表单,除非另有规定.您可以使用以下两种策略:

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>元素发出的submit事件:

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