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

Posted 2023-02-22

【中文标题】表单提交后如何防止页面重新加载 - JQuery

【英文标题】：How to prevent page from reloading after form submit - JQuery

【发布时间】：2018-01-19 21:44:17

【问题描述】：

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

我正在使用一些 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="[e-mail]">
    </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";
?>

这是日志截图：

【问题讨论】：

然后只需将type="submit" 替换为type="button"，因为您使用的是AJAX。无需提交类型

尝试将按钮的输入类型从submit更改为button。

How to avoid page reload in php form submission的可能重复

将事件添加到您的函数参数中，然后在该函数中 event.preventDefault()

旁注：你有一个严重的 sql 注入漏洞。

【参考方案1】：

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

使用<button type="button"> 覆盖默认提交行为 在 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 属性：

name 属性是.serialize() 工作所必需的，根据jQuery's documentation：

对于要包含在序列化字符串中的表单元素的值，该元素必须具有 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="[e-mail]">

然后在你的 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");
    );
  );
);

【讨论】：

如果希望表单使用键盘提交，请使用 #2

@charlietfl 您是对的：就用户可访问性而言，解决方案#2 是可行的方法；）还更新了答案以获得更好的解决方案，即监听提交事件而不是按钮单击。跨度>

@Terry 是迄今为止我在这里得到的最有用的答案之一。我正在向自己教授这门课作为定向学习，所以说实话，这不仅有帮助！我在谷歌搜索中看到了很多这样的东西，但从来没有很好地解释过！谢谢！

@Terry 认真的人......你是一个救生员！！！我花了 6 个小时尝试了很多不同的事情（包括其他 *** 建议）。我几乎要放弃和哭泣（比喻）。我很高兴你的解决方案奏效了。如果我们碰到对方，我会请你喝几杯。

@Terry 我真的很想要表单和提交类型按钮，因为提交类型按钮会提示输入必填字段。因此，虽然解决方案 1 不起作用，但解决方案 2 就像一个魅力。再说一次，给我喝酒和吃午饭！！！