从 slider 页面调用 PHP 文件，如何返回活动幻灯片？

Question

I have a simple home-grown slider whose input is pulled from a MySQL database using PHP that echos the HTML for the slider page to build it. 我正在开发向 slider 图片“添加评论”的功能，当您单击“添加评论”按钮时，它会拉出一个隐藏的表单。 填写该表单并提交后，我调用一个“updateComment.php”文件，该文件提取表单发布的值并对数据库中 slider 序列中该图片的评论字段执行 CONCAT_WS。

我使用标头（'位置：'.$_SERVER['HTTP_REFERER']）; 在“updateComment.php”文件末尾调用返回到表单提交调用它的slider页面。 当它返回时，它会返回到第一个幻灯片页面而不是活动幻灯片页面。 对我来说，为什么使用该重定向方法会发生这种情况是有道理的，但我不知道如何让它返回到活动幻灯片页面。 我一直在阅读 PHP 重定向，但找不到任何可行的方法。 任何明智的建议或线索如何做到这一点？

做一个 slider 页面的页面源代码并删除该页面上构建的所有详细数据库字段信息，这里是围绕表单调用“updateComment.php”的代码。

<div style="text-align: center;">
   <button class="commentbutton" onclick="showForm('formElementTimothyTopp')">Add a memory or story of Tim</button> 
</div>
<div>
  <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">
     <div class="formitemname">Name:</div>
     <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name">
     <div class="formitemnamelonger">Your Memory or Story of Tim:</div>
     <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea>
     <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button>
  </form>
<div>

这是实际的“updateComments.php”代码

<?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 = "UPDATE rip SET Comments = CONCAT_WS('',Comments,'$toappend') WHERE (ClassmateNameFirst = '$firstname' AND ClassmateNameLast = '$lastname')";
   $result = $conn-> query($sql);
   header('Location: ' .$_SERVER['HTTP_REFERER']);
?>

Slider功能代码为：

<script>
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>

除了显示的活动图像之外，slider 页面上的信息的 rest 还包括“评论”字段，并且该页面是使用 HTML 表构建的。 每个 slider 页面都是自己的表，数十张图像，每个都有一个表条目，全部由数据库构建，使用 PHP 代码呈现页面。

Answer 1

我的想法是将current_slide与表单一起提交。 然后服务器知道使用额外参数"$page?current_slide=". $current_slide; "$page?current_slide=". $current_slide; . 然后在初始化 slider 时分析此参数，以从正确的幻灯片开始。

一些代码：

 function update_current() { var current_slide = 12; // get from slider document.getElementById("current_slide").value = current_slide; }

 <form id="formElementTimothyTopp" style="display: none;" onsubmit="update_current()" 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" value="" id="current_slide" name="current_slide"> <div class="formitemname">Name:</div> <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name"> <div class="formitemnamelonger">Your Memory or Story of Tim:</div> <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea> <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button> </form>

然后在服务器上：

// TODO: append query string parameter in a better way
header('Location: ' .$_SERVER['HTTP_REFERER'] . "?current_slide=" . $_POST["current_slide"]);

然后重新加载客户端：

const urlParams = new URLSearchParams(window.location.search);
const current_slide = urlParams.get('current_slide');

// TODO: goto slide current_slide