如何将表单中的数据传递给php函数,并将其传递给javascript,以便在画布上绘制,而无需刷新页面?
我希望创建一个只使用html、php和javascript的基本图形计算器。下面的代码刷新页面,因此javascript永远不会有机会绘制图形。其工作方式是php从表单中获取数据,并将方程的结果逐点输出到数组中。数组被传递给javascript,javascript使用数组的索引表示x值,该索引处的值表示y值。我尝试将表单目标设置为一个单独的iframe,但是图形仍然没有绘制,我不知道为什么。我听说有一种方法可以用AJAX实现这一点,但目前的挑战是只使用html、css(如果需要)、javascript和php如何将表单中的数据传递给php函数,并将其传递给javascript,以便在画布上绘制,而无需刷新页面?,javascript,php,canvas,Javascript,Php,Canvas,我希望创建一个只使用html、php和javascript的基本图形计算器。下面的代码刷新页面,因此javascript永远不会有机会绘制图形。其工作方式是php从表单中获取数据,并将方程的结果逐点输出到数组中。数组被传递给javascript,javascript使用数组的索引表示x值,该索引处的值表示y值。我尝试将表单目标设置为一个单独的iframe,但是图形仍然没有绘制,我不知道为什么。我听说有一种方法可以用AJAX实现这一点,但目前的挑战是只使用html、css(如果需要)、javasc
<?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>
十^:
+x*:
+1*:
var b=document.body;
var c=document.getElementsByTagName('canvas')[0];
var a=c.getContext('2d');
var数据=;
a、 beginPath();
a、 移动到(0530);
a、 strokeStyle=“黑色”;
对于(变量i=0;i
我认为问题在于您将数据设置为等于JSON字符串,而不是数组对象
你能把这行改一下吗
var data = <?php echo json_encode($results); ?>;
var数据=;
对下列事项:
var data = JSON.parse("<?php echo json_encode($results); ?>");
var data=JSON.parse(“”);
编辑:我重新阅读了您的问题,您希望页面顶部的php变量由用户通过页面上的表单进行设置。问题在于,PHP是在服务器上运行的,HTML/Javascript是在用户的浏览器上呈现和运行的。因此,在用户看到表单之前,所有的php都已经执行了
不过,您可以使用AJAX从HTML页面运行php。因此,您将使用一个php文件来执行计算和构建数组,并最终返回数组的JSON。然后JavaScript将处理结果,就像我在上面的原始答案中所说的那样
对于处理所需组件的AJAX教程:如果添加以下javascript
console.dir(数据),html文档的其他部分(如标记)是正确的代码>在json_编码行之后,控制台的输出是什么?(chrome(windows)中的ctrl+shift+i)刚刚尝试了这一点,页面仍在刷新,没有绘制图形。请阅读。我还不懂AJAX,除非你能给我上一堂关于如何设置Id的快速课,我只需要使用php、javascript和html。有没有什么方法可以让我对页面进行结构化,使php只在我点击submit之后才被读取和执行?php是在托管该网页的服务器上运行的。浏览器从服务器下载HTML,服务器在返回HTML之前运行文件中的任何php。因此,客户机从未看到、执行或意识到php。每当您意识到必须在不刷新页面的情况下运行php时(一种常见情况),您就必须使用AJAX来执行.php文件。请参阅我在答案中放置的链接,以获取有帮助的教程