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

Question

我有一个简单的自制滑块，它的输入是使用PHP从MySQL数据库中提取的，PHP会回声滑块页面的HTML来构建它；添加评论"；到滑块图片，当您点击"；添加评论"按钮一旦填写了该表格并进行了提交，我就称之为"提交"；updateComment.php"；该文件提取表单发布的值，并对数据库中滑块序列中该图片的"注释"字段执行CONCAT_WS操作。

我使用标头("位置：".$_SERVER["HTTP_REFERER"](；在"；updateComment.php"；文件，返回到表单提交调用它的滑动页。当它返回时，它将返回到第一个滑动页，而不是活动的幻灯片页我理解为什么使用重定向方法会发生这种情况，但我不知道如何让它返回到活动幻灯片页面我一直在阅读PHP重定向，但找不到任何可行的东西有什么明智的建议或如何做到这一点的线索吗

做一个滑动页的PageSource并剥离该页上构建的所有详细数据库字段信息，下面是表单调用"的代码；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']);
?>

滑块功能代码为：

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

除了显示的活动图像之外，滑块页面上的其余信息还包括Comments字段，该页面是使用HTML表构建的。每个滑块页面都是自己的表，几十个图像，每个图像都有一个表条目，所有这些都是由使用PHP代码渲染页面的数据库拉取构建的。

Answer 1

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

部分代码：

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

更新：

另一个想法是在提交滑块之前使用localStorage来存储滑块的状态。然后，当从localStorage加载getItem并检查它时。

// when submitting
function update_current() {
var current_slide = 12; // get from slider
localStorage.setItem("current_slide", current_slide);
}

// when loading the page call:
function load_current() {
var current_slide = localStorage.getItem("current_slide")
if (current_slide) {
// set slider slide to be current_slide
}
}