[英]How to pass the id from url in php function without refreshing the page?
[英]How to pass data from a form to a php function to javascript to draw on a canvas without refreshing the page?
我希望僅使用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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.