在同一页面上更改PHP映像？

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. 
     });  
  });

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

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

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

最后说明：

要在页面中包含jQuery，只需使用以下标记：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>