当我们在使用 PHP 创建表单时，有时我们希望在用户提交表单后，页面不会跳转，而是继续停留在当前页面，这往往可以提高用户体验，也使得我们的页面看起来更加专业。那么，出现表单提交后页面自动跳转的问题时，可能存在以下情况：

1.没有使用 AJAX：如果你希望表单提交后页面不跳转，通常情况下，可以通过使用 AJAX 技术来实现。如果你没有使用 AJAX，用户提交表单后就会导致页面跳转。

2.表单的提交方式：表单提交方式分为 GET 和 POST 两种，通常情况下，GET 会通过 URL 将数据传递给服务器，而 POST 则不会。如果你的表单使用了 GET 方式提交，那么用户提交表单后页面就会跳转到服务器的响应页面。而使用 POST 方式提交表单，可以通过阻止默认的表单提交行为，避免页面跳转。

为了实现表单提交后不跳转页面，我们可以通过下面两种方法中的任一方法来实现：

方法一：使用 AJAX 技术

使用 AJAX 技术可以让表单提交后不会刷新页面，这样可以使用户体验更好，操作界面也更加美观。下面是一段示例代码：

  <meta charset="utf-8">
  <title>表单提交不跳转</title>
  <script src="https://hm.baidu.com/hm.js?d53d2ea0c4a019160fbd49ca8f9bfc17"></script><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>


  <form id="myForm" method="post">
    <label>请输入名称：</label>
    <input type="text" name="name">
    <label>请输入内容：</label>
    <textarea name="content"></textarea>
    <button type="button" id="submit">提交</button>
  </form>
  <div id="result"></div>
  <script>
    $(document).ready(function(){
      $('#submit').click(function(){
        $.ajax({
          type: "POST",
          url: "submit.php",
          data: $("#myForm").serialize(),
          success: function(data){
            $("#result").html(data);
          }
        });
      });
    });
  </script>

上面示例中，我们首先引入了 jQuery 库，并定义了一个包含表单元素的表单。当用户点击提交按钮后，使用 jQuery 的 ajax 函数来提交表单中的数据。在 success 回调函数中，我们可以处理服务器返回的数据并进行相应的操作。

方法二：阻止默认提交行为

如果你不想使用 AJAX 技术，还可以通过阻止表单的默认提交行为来实现。下面是一个示例代码：

  <meta charset="utf-8">
  <title>表单提交不跳转</title>


  <form id="myForm" method="post" action="submit.php">
    <label>请输入名称：</label>
    <input type="text" name="name">
    <label>请输入内容：</label>
    <textarea name="content"></textarea>
  </form>
  <div id="result"></div>
  <button type="button" id="submit">提交</button>
  <script>
    var form = document.getElementById('myForm');
    var submitButton = document.getElementById('submit');
    submitButton.addEventListener('click', function() {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'submit.php');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onload = function() {
        document.getElementById('result').innerHTML = this.responseText;
      };
      xhr.send(new FormData(form));
      return false; // 防止表单自动提交
    });
  </script>

上述示例中，我们首先定义了一个包含表单元素的表单，同时使用一个 button 标签来作为提交按钮。在按钮的 click 事件中，我们使用 XMLHttpRequest 对象来完成表单数据的提交。最后，我们通过 return false 来防止表单自动提交。

综上所述，通过使用以上两种方式，我们就可以实现表单提交后不跳转页面的效果。

在网页开发中，表单是非常常见和重要的一部分。当用户填写表单后，往往需要将数据提交到后台进行处理。在传统的表单提交方式中，当用户点击提交按钮时，页面会进行跳转，提交表单数据并显示处理结果。但是有时候我们可能需要在不跳转页面的情况下提交表单数据。本文将介绍如何实现不跳转页面的表单提交。

## 1. 使用 AJAX 技术

AJAX 是一种异步的 Web 技术，可以实现不重新加载整个页面的情况下与后台进行数据交互。使用 AJAX 技术可以实现不刷新页面的表单提交。

下面是一个简单的 AJAX 提交表单的示例：

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
  var formData = new FormData(document.getElementById("myForm"));
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "submit.php");
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert(xhr.responseText);
    }
  };
  xhr.send(formData);
}
</script>

在上面的示例中，使用了 `XMLHttpRequest` 对象向后台 `submit.php` 发送了表单数据，由于其是异步请求，因此不会进行页面跳转。

## 2. 使用 jQuery 技术

如果你使用 jQuery 库，可以使用其提供的 AJAX 函数来实现不跳转页面的表单提交。

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function submitForm() {
  var formData = new FormData(document.getElementById("myForm"));
  $.ajax({
    type: "POST",
    url: "submit.php",
    data: formData,
    contentType: false,
    processData: false,
    success: function(data) {
      alert(data);
    }
  });
}
</script>

在上面的示例中，使用了 `$.ajax()` 函数向后台 `submit.php` 发送了表单数据，也实现了不跳转页面的表单提交。

## 3. 使用 Fetch API 技术

Fetch API 是一种基于 Promise 的新型 Web API，可以用来进行异步请求。类似于 AJAX，它可以实现不跳转页面的表单提交。

下面是一个使用 Fetch API 提交表单的示例：

<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
  var formData = new FormData(document.getElementById("myForm"));
  fetch("submit.php", {
    method: "POST",
    body: formData
  })
  .then(response => response.text())
  .then(data => {
    alert(data);
  });
}
</script>

在上面的示例中，使用了 `fetch()` 函数向后台 `submit.php` 发送了表单数据，并且使用 Promise 对象处理返回的响应结果。

## 总结

本文介绍了三种方法实现不跳转页面的表单提交：使用 AJAX 技术，使用 jQuery 技术和使用 Fetch API 技术。需要注意的是，在使用 AJAX、Fetch API 这两种技术时，要避免跨域请求问题，不然会无法正常运行。