Question

所以我尝试在PHP中进行一个非常简单的列图演示。它显示了喜欢，不喜欢和中立选票的相对数量。

图像创建代码位于“columnmaker.php”（它有一个PNG输出），而网站本身是“column.php”。我很确定columnmaker.php是否正常工作。

现在这是我在column.php中尝试做的事情：

<img src="columnmaker.php" alt="">
...
<form action="" method="POST">
    Like: <input type="number" name="like" min="0" step="100"> <br>
    Dislike: <input type="number" name="dislike" min="0" step="100"> <br>
    Neutral: <input type="number" name="neutral" min="0" step="100"> <br>
    <input type="submit" value="Change!">
</form>

但这个从未显示实际更改的图像。如果我在表单操作字段中写“columnmaker.php”，则HTML输入不再显示（显然）。

那么，我该怎么做才能更改图像并同时保持在同一页面上？

Answer 1

我不明白为什么你无法定义动作并仍然显示图像。你可以这样做：

// form.php
<?php if(!empty($_POST)) { ?>
<img src="columnmaker.php?like=<?php echo $_POST['like']; ?>&amp;dislike=<?php echo $_POST['dislike']; ?>&amp;neutral=<?php echo $_POST['neutral']; ?>" alt="">
<?php } ?>

<form action="form.php" method="POST">
    Like: <input type="number" name="like" min="0" step="100" value="<?php echo !empty($_POST['like']) ? $_POST['like'] : 0; ?>"> <br>
    Dislike: <input type="number" name="dislike" min="0" step="100" value="<?php echo !empty($_POST['dislike']) ? $_POST['dislike'] : 0; ?>"> <br>
    Neutral: <input type="number" name="neutral" min="0" step="100" value="<?php echo !empty($_POST['neutral']) ? $_POST['neutral'] : 0; ?>"> <br>
    <input type="submit" value="Change!">
</form>

现在你已经完成了，在columnmaker.php中，你可以访问$_GET['like']等来生成图像。确保您的header()是正确的。

Answer 2

好吧，如果你想要更多的交互性，我建议你使用JavaScript来生成图表，而不是PHP，但你仍然可以使它工作。

为了简单起见，我假设您在网站上加载了jQuery，并且该column.php工作得很好。

将表单更改为：

<img id="dynamicColumns" src="columnmaker.php" alt="">

<form action="" method="POST">
    Like: <input type="number" id="like" name="like" min="0" step="100"> <br>
    Dislike: <input type="number" id="dislike" name="dislike" min="0" step="100"> <br>
    Neutral: <input type="number" id="neutral" name="neutral" min="0" step="100"> <br>
   <input type="submit" id="updateColumns" value="Change!">
</form>

然后你可以使用jQuery发送一个AJAX请求，并以这种方式捕获响应：

 $('#updateColumns').on('click', function(e) {
      e.preventDefault(); // This statement prevents the form from being submitted
     var like = $('#like').val();
     var dislike = $('#dislike').val();
     var neutral = $('#neutral').val();
     $.ajax({
          type: "POST",
          data: {like:like, dislike:dislike, neutral:neutral}
          url: "columnmaker.php"
     }).done(function(response) {
        d = new Date();
        $("#dynamicColumns").attr("src", "/columnmaker.php?"+d.getTime());
        // latter statement will force the browser to reload image on request. 
     });  
  });

url调用中的$.ajax参数会通过POST将所有信息发送到该页面，以便您可以访问likes，dislikes和{{1以这种方式在PHP中的值：

neutral $_POST['likes']，$_POST['dislikes']

并以您想要动态生成列的任何方式使用这些变量。

最后注意事项：

在页面中包含jQuery只需使用此标记：

$_POST['neutral']

在保持同一页面的同时改变PHP图像？

2 个答案: