0

我正在寻找仅使用 html、php 和 javascript 来创建一个基本的图形计算器。下面的代码刷新页面，因此 javascript 永远没有机会绘制图形。这应该起作用的方式是php从表单中获取数据并将方程的结果逐点输出到数组中。数组被传递给 javascript，它使用数组的索引作为 x 值，使用该索引处的值作为 y 值。我尝试让表单以单独的 iframe 为目标，但图表仍然没有绘制，我不知道为什么。我听说有一种方法可以用 AJAX 做到这一点，但目前的挑战是只用 html、css（如果需要）、javascript 和 php 来做到这一点。 

   <?php
    if( isset($_POST['submit']) )
    {
        $val1 = htmlentities($_POST['val1']);
        $val2 = htmlentities($_POST['val2']);
        $val3 = htmlentities($_POST['val3']);
        $results;
        for($i = 0; $i < 530; $i++)
        {
            $results[i] = pow($i,$val1) + $i*$val2 + $val3;
            if($results[i] >= 530)
                break;
        }
    }
    ?>
    <form action="example4.php" method="POST">
        x^:
        <input type="text" name="val1" id="val1"></input>
       +x*:
        <input type="text" name="val2" id="val2"></input>
       +1*:
        <input type="text" name="val3" id="val3"></input>

        <input type="submit" value="send"></input>
    </form>
    <canvas id="c" height="530" width="530" style="border:1px solid #d3d3d3;"></canvas>
          <script type="text/javascript">
              var b = document.body;
              var c = document.getElementsByTagName('canvas')[0];
              var a = c.getContext('2d');
              var data = <?php echo json_encode($results); ?>;
              a.beginPath();
              a.moveTo(0,530);
              a.strokeStyle="black";
              for(var i=0; i < data.length-1; i++))
              {
                a.moveTo(i,data[i]);
                a.lineTo(i+1,data[i+1]);
                a.stroke();
              }
          </script>
4

1 回答 1

0

我认为问题在于您将数据设置为等于 JSON 字符串而不是数组对象。

您可以更改显示为：

var data = <?php echo json_encode($results); ?>;

到以下：

var data = JSON.parse("<?php echo json_encode($results); ?>");

编辑：我重读了您的问题，发现您希望用户通过页面上的表单设置页面顶部的 php 变量。您目前如何考虑的问题是 PHP 在服务器上运行，而 HTML/Javascript 是在用户的浏览器上呈现和运行的。所以在用户看到表单之前，所有的 php 都已经执行了。

您可以使用 AJAX 从 HTML 页面运行 php。因此，您将对执行计算并构建数组并最终回显数组的 JSON 的 php 文件进行 AJAXing。然后，JavaScript 将像我在上面的原始答案中谈到的那样处理结果。

对于处理您需要的组件的 AJAX 教程：http ://www.simpletutorials.com/?path=tutorials/javascript/simple_ajax

于 2013-11-13T21:47:14.910 回答