时间戳

首页 > 解决方案 > 提交后如何防止重定向到php文件？

javascript - 提交后如何防止重定向到php文件？

问题描述

我在提交表单时遇到问题。表单数据按照应有的方式发送到服务器，但是在单击发送按钮后，我被重定向到 php 文件。提交后，我想保持在同一页面上。

这是代码：

window.addEventListener('load', function() {

  $(document).ready(function() {

    $("#send").click(function(e) {
      e.preventDefault();
      $.ajax({
        type: 'POST',
        url: 'submitmessage.php',
        data: $('form').serialize(),
        success: function() {
          console.log("Submission succeeded");
          document.getElementById("send").innerHTML = "Sent";
        },
        error: function() {
          console.log("Error");
        }
      });
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="submitmessage.php" method="POST">
  <input id="name" name="name" placeholder="Name" type="text" ></input>
  <input id="email" name="email" placeholder="email" type="email" ></input>
  <textarea id="message" name="message" maxlength="100" placeholder="Write here"></textarea><br>
  <button id="send" name="send">Submit</button>
</form>

标签： javascripthtmlajax

解决方案

不要在特定按钮上使用处理程序，而是将其分配给表单：

$('form[action="submitmessage.php"]').on("submit", function(e) {

  // prevent default browser form submit 
  e.preventDefault(); 
  
  // We'll use AJAX instead:
  $.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
    success: function() {
      $("#send").text("Sent");
    },
    error: function() {
      $("#send").text("Error");
    }
  });
});

推荐阅读