Question

我试图通过点击使用PHP从文本文件中收集的值（文件名）来更改图像。这是通过将文件收集为数组（data）并在计数器（counter）的帮助下回显数组中的正确项来完成的。使用Javascript每次单击时此计数器都会递增，但我想将此递增的变量返回给PHP，以便能够更改图像。有没有办法做到这一点？这是我到目前为止的尝试，尝试发布变量（请参阅下面的完整代码）：

<script>
var variableToSend = JSON.parse(localStorage.getItem('counter'));
$.post('lan7_old.php', {variable: variableToSend});
</script>

<?php $counter = $_POST['variable'];
echo $counter; ?

我认为它应该发布，因为页面在图片点击时刷新，但也许我在这里弄错了。或者我的代码有什么问题吗？显示的图像仍然是文本文件中的第一个图像，但这只是因为我在PHP counter中向echo添加了整数 - 没有为PHP counter变量设置值

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles.css">
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>

<script>
// Saves counter variable although the page is refreshed
$(document).ready(function(){
    if (localStorage.getItem('counter') === null) {
        localStorage.setItem('counter', JSON.stringify(0));
    }
    // Incrementing counter until next page is needed
    $("img").click(function(){
        var counter = JSON.parse(localStorage.getItem('counter'));
        if(counter < 60) {
            counter += 4;
            localStorage.setItem('counter', JSON.stringify(counter));
        }
        else {
            localStorage.setItem('counter', JSON.stringify(0));
            window.location.href = '8.php';
            return false;
        }
        $("#test").text(localStorage.getItem('counter')); //for testing

        // sending js variable to be obtained by PHP
        var variableToSend = JSON.parse(localStorage.getItem('counter'));
        $.post('lan7_old.php', {variable: variableToSend});
    });
    $("#test").text(localStorage.getItem('counter'));
});
</script>

<div class="main">
    <h1>Heading</h1>
    <p>Heading 2</p>
    <div id="test">hello</div>

    <?php $data = getData($subtest_nr);
    // retrieving counter variable
    $counter = $_POST['variable'];
    echo $counter; //for testing ?> 

    <form id="myform" method="post">
    <div class="four_images">
            <div class="flex-item">
                <input type="radio" name="image" value="7.11" id="alt1" class="hidden">
                <label for="alt1"><img src="images/<?php echo $data[$counter+0]; ?>"></label>
            </div>
            <div class="flex-item">
                <input type="radio" name="image" value="7.12" id="alt2" class="hidden">
                <label for="alt2"><img src="images/<?php echo $data[$counter + 1]; ?>"></label>
            </div>
            <div class="flex-item">
                <input type="radio" name="image" value="7.13" id="alt3" class="hidden">
                <label for="alt3"><img src="images/<?php echo $data[$counter+2]; ?>"></label>
            </div>
            <div class="flex-item">
                <input type="radio" name="image" value="7.14" id="alt4" class="hidden">
                <label for="alt4"><img src="images/<?php echo $data[$counter+3]; ?>"></label>
            </div>
            <div>
                <input type="submit" name="save" value="Save Image Selection">
            </div>
    </div>
    </form>
</div>

</body>
</html>

Answer 1

如果计数器达到60或以上（window.location.href ='8.php¨），您的页面只会刷新。

Php只渲染服务器端，现在你正在做一个javascript post请求但忽略了响应，所以这没有做任何事情。

要么你需要让你的php返回你用javascript用来更新页面（DOM树）的响应，或者你应该重新加载整个页面，例如window.location.href =“index.php？counter =“+计数器。

从Javascript向php发送变量，无效

1 个答案: