从Javascript向PHP发送变量，无法正常工作

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 echo添加了整数来counter -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发布请求，但忽略了响应，因此此操作无济于事。

您要么需要使php返回一个响应，然后您就可以通过javascript使用它来更新页面（DOM树），或者您应该使用例如window.location.href =“ index.php？counter =” +计数器。

从Javascript向PHP发送变量，无法正常工作

问题描述

1 个解决方案

解决方案1
0 2016-10-13 08:52:54

从Javascript向PHP发送变量，无法正常工作

问题描述

1 个解决方案

解决方案1 0 2016-10-13 08:52:54

解决方案1
0 2016-10-13 08:52:54