我希望创建一个仅使用html，php和javascript的基本图形计算器。下面的代码刷新页面，因此javascript永远没有机会绘制图形。这应该工作的方式是 php 从表单中获取数据并将等式的结果逐点输出到数组中。数组被传递给 javascript，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>
我认为
问题是您将数据设置为等于 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。 因此，您将 AJAXing 到一个 php 文件，该文件执行计算并构建数组，并最终回显数组的 JSON。 然后，JavaScript 将处理结果，就像我在上面的原始答案中谈到的那样。
对于处理组件的 AJAX 教程，您将需要：http://www.simpletutorials.com/?path=tutorials/javascript/simple_ajax