提交评论后从PHP重定向回轮播页，如何返回当前激活幻灯片？

核心原因是表单提交后页面完全刷新，轮播的slideIndex变量被重置为初始值，导致回到第一张幻灯片。下面提供两种可行的解决方案：

方案一：通过URL参数传递当前幻灯片索引 #

这种方法通过在重定向时携带当前幻灯片的索引，页面重新加载后读取该参数并显示对应幻灯片。

1. 修改表单，添加当前幻灯片索引的隐藏字段 #

在评论表单中增加一个隐藏输入框，用来存储当前激活的幻灯片索引：

<form id="formElementTimothyTopp" style="display: none;" action="updateComment.php" method="post" autocomplete="off">
  <!-- 原有隐藏字段 -->
  <input type="hidden" value="Timothy" id="fname" name="fname">
  <input type="hidden" value="Topp" id="lname" name="lname">
  <!-- 新增：存储当前幻灯片索引 -->
  <input type="hidden" name="currentSlide" id="currentSlide" value="">
  
  <!-- 其他表单元素保持不变 -->
</form>

2. 表单提交前赋值当前幻灯片索引 #

给表单添加提交事件监听，将全局的slideIndex值存入隐藏字段：

// 确保slideIndex是全局变量（你的轮播代码里应该已经定义）
let slideIndex = 1; // 初始值

document.getElementById('formElementTimothyTopp').addEventListener('submit', function() {
  document.getElementById('currentSlide').value = slideIndex;
});

3. 修改updateComment.php，重定向时携带参数 #

在数据库更新完成后，读取表单提交的currentSlide参数，拼接到重定向URL中：

<?php
$conn = mysqli_connect("localhost", "root", "", "classmateinfo");
if ($conn->connect_error) {
  die("Connection failed:". $conn->connect_error);
}

$firstname = $_POST['fname'];
$lastname = $_POST['lname'];
$memory = !empty($_POST['memory-story'])?$_POST['memory-story']:'';
$name = !empty($_POST['commentor'])?$_POST['commentor']:'';
$toappend = $memory . "<br>-- " . $name . "<br><div><img src=images/spacer10.gif></div>";

// 替换原有SQL为预处理语句，防止SQL注入
$stmt = $conn->prepare("UPDATE rip SET Comments = CONCAT_WS('', Comments, ?) WHERE ClassmateNameFirst = ? AND ClassmateNameLast = ?");
$stmt->bind_param("sss", $toappend, $firstname, $lastname);
$stmt->execute();
$stmt->close();

// 处理重定向，携带当前幻灯片索引
$currentSlide = isset($_POST['currentSlide']) ? intval($_POST['currentSlide']) : 1;
$referrer = $_SERVER['HTTP_REFERER'];
// 检查URL是否已有参数，避免重复添加?
$separator = strpos($referrer, '?') !== false ? '&' : '?';
header('Location: ' . $referrer . $separator . 'slide=' . $currentSlide);

$conn->close();
?>

4. 轮播页面加载时读取URL参数设置初始幻灯片 #

在生成轮播页面的PHP代码中，读取URL的slide参数，设置初始的slideIndex：

<?php
// 获取URL中的slide参数，默认值为1
$startSlide = isset($_GET['slide']) ? intval($_GET['slide']) : 1;
?>

<script>
// 用PHP传递的初始值设置slideIndex
let slideIndex = <?php echo $startSlide; ?>;

// 页面加载时显示对应幻灯片
window.onload = function() {
  showSlides(slideIndex);
};

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides"); 
  if (n > slides.length) {slideIndex = 1};
  if (n < 1) {slideIndex = slides.length};
  for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}
</script>

方案二：使用AJAX异步提交表单（推荐） #

这种方法不需要页面刷新，直接在后台提交评论，提交成功后更新当前幻灯片的评论内容，体验更流畅。

1. 修改表单提交逻辑，阻止默认刷新 #

给表单添加onsubmit事件，用AJAX提交数据：

<form id="formElementTimothyTopp" style="display: none;" action="updateComment.php" method="post" autocomplete="off" onsubmit="handleCommentSubmit(event, this)">
  <!-- 原有表单元素保持不变 -->
</form>

2. 添加AJAX提交的JS函数 #

function handleCommentSubmit(event, form) {
  event.preventDefault(); // 阻止页面刷新
  const formData = new FormData(form);

  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(response => {
    if (response.ok) {
      // 提交成功：隐藏表单，刷新当前幻灯片的评论内容
      form.style.display = 'none';
      // 假设你的评论容器有类似"comments-{fname}{lname}"的ID
      const commentContainerId = `comments-${form.fname.value}${form.lname.value}`;
      const commentContainer = document.getElementById(commentContainerId);
      
      // 重新获取最新评论并更新
      fetch(`getComments.php?fname=${form.fname.value}&lname=${form.lname.value}`)
      .then(res => res.text())
      .then(comments => {
        commentContainer.innerHTML = comments;
        alert('评论提交成功！');
      });
    } else {
      alert('提交失败，请稍后重试');
    }
  })
  .catch(error => {
    console.error('提交出错:', error);
    alert('提交过程中出现错误');
  });
}

3. 创建getComments.php用于获取单条评论 #

这个文件用来根据姓名获取最新的评论内容：

<?php
$conn = mysqli_connect("localhost", "root", "", "classmateinfo");
if ($conn->connect_error) {
  die("Connection failed:". $conn->connect_error);
}

$firstname = $_GET['fname'];
$lastname = $_GET['lname'];

// 预处理语句防止SQL注入
$stmt = $conn->prepare("SELECT Comments FROM rip WHERE ClassmateNameFirst = ? AND ClassmateNameLast = ?");
$stmt->bind_param("ss", $firstname, $lastname);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_assoc();

// 返回评论内容，无评论则返回空字符串
echo $row['Comments'] ?? '';

$stmt->close();
$conn->close();
?>

4. 修改updateComment.php适配AJAX请求 #

去掉重定向代码，改为返回成功状态：

<?php
$conn = mysqli_connect("localhost", "root", "", "classmateinfo");
if ($conn->connect_error) {
  die("Connection failed:". $conn->connect_error);
}

$firstname = $_POST['fname'];
$lastname = $_POST['lname'];
$memory = !empty($_POST['memory-story'])?$_POST['memory-story']:'';
$name = !empty($_POST['commentor'])?$_POST['commentor']:'';
$toappend = $memory . "<br>-- " . $name . "<br><div><img src=images/spacer10.gif></div>";

// 预处理语句防止SQL注入
$stmt = $conn->prepare("UPDATE rip SET Comments = CONCAT_WS('', Comments, ?) WHERE ClassmateNameFirst = ? AND ClassmateNameLast = ?");
$stmt->bind_param("sss", $toappend, $firstname, $lastname);
$stmt->execute();
$stmt->close();

// 给AJAX返回成功信号
echo "success";

$conn->close();
?>

重要提示 #

• 你的原有代码存在SQL注入风险，一定要使用预处理语句（上面的两种方案都已修改为预处理方式），避免直接将用户输入拼接到SQL语句中。
• 如果使用方案一，要注意处理URL参数的合法性（比如判断slide值是否在幻灯片数量范围内），防止非法参数导致错误。

内容的提问来源于stack exchange，提问作者Alan - Seattle