form表单提交跳转post.php问题：如何阻止点击发布按钮跳转页面？

问题根源 #

• 表单默认点击提交按钮后会触发跳转行为，跳转至action属性指定的post.php页面，你现有的JS逻辑仅控制了弹窗和提示的显示隐藏，没有阻止默认的提交跳转行为，同时需要使用异步提交的方式将数据传给后端，才能实现停留在原页面的需求。

1. 修改JavaScript代码 #

将你现有的JS代码替换为如下内容：

var postContent = document.getElementById('postContent');
var postBtn = document.getElementById('pos');
var noText = document.getElementById('noText');
var popup = document.getElementById('popup');

postBtn.addEventListener('click', (e) => {
  // 阻止表单默认提交跳转行为
  e.preventDefault();
  
  // 加trim避免全空格的无效内容被判定为有效
  if (postContent.value.trim() === "") {
    noText.style.visibility = 'visible';
    popup.style.display = 'flex';
  } else {
    noText.style.visibility = 'hidden';
    popup.style.display = 'none';
    
    // 异步提交数据到post.php
    let formData = new FormData();
    formData.append('postContent', postContent.value);
    
    fetch('post.php', {
      method: 'POST',
      body: formData
    }).then(res => res.text())
    .then(data => {
      // 此处可自行扩展提交成功后的逻辑，比如清空文本域、提示发布成功等
      postContent.value = '';
    }).catch(err => {
      console.error('提交失败：', err);
    });
  }
});

2. 修复post.php中的错误代码 #

你现有post.php存在两处可优化/修复的点：

1. 最后一段判断逻辑里的$sql变量未定义，属于无效代码，会抛出错误，需要删除
2. mysqli_stmt_execute方法仅需要传入的参数错误，不需要传预处理对象即可，不需要传入数据库连接对象
   修改后完整的post.php代码如下：

<?php
session_start();

// 连接数据库
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$database = "signup";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, we could not connect to the database");

// 发布逻辑
if (!empty($_POST['postContent'])) {
  $post = trim($_POST['postContent']);
  $firstname = $_SESSION['firstname'];
  $lastname = $_SESSION['lastname'];

  $postSQL = "INSERT INTO posts (firstname, lastname, body, date_posted) VALUES (?, ?, ?, NOW())";
  $stmt = mysqli_prepare($connection, $postSQL);
  mysqli_stmt_bind_param($stmt, 'sss', $firstname, $lastname, $post);
  mysqli_stmt_execute($stmt);
} else {
  echo "No post insertion, as field is empty!";
}

// 关闭数据库连接
mysqli_close($connection);
?>

内容的提问来源于stack exchange，提问作者user17131771