gpt4 book ai didi

javascript - 从 javascript 调用 PHP 函数

转载 作者:行者123 更新时间:2023-11-28 08:28:48 28 4
gpt4 key购买 nike

我正在尝试为 Raspberry Pi 制作一个简单的 Web GUI。它应该使用 php 和 JavaScript 在图像上绘制温度值。

我将在 PHP 和我正在编写的 C++ 应用程序之间使用一些 IPC。但现在我只想从文件中读取一个值并将其绘制在图像上。 (该文件是使用 OWFS 的 1wire 总线的温度值)

我的问题

  • JavaScript 函数 ReadTemps() 每 5 秒调用一次,但 PHP 值仅在页面刷新时更新。

  • 我没有 JavaScript 经验。

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Still life web application</title>
<canvas id="myCanvas" width="768" height="576" style="border:0px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<?php
function get_temp()
{
echo round( floatval( file_get_contents( '/mnt/1wire/uncached/vessel/temperature' ) ), 2 );
}
?>

<script>
var bgImg = new Image();
bgImg.src = 'image.jpg';

function ReadTemps()
{
var vessel_temp = '<?php get_vessel_temp(); ?>';

var c = document.getElementById( "myCanvas" );
var ctx = c.getContext( "2d" );

ctx.drawImage( bgImg, 0, 0 );

ctx.font="20px Georgia";
ctx.fillText( vessel_temp + '\u00B0', 330, 430 );

setTimeout( ReadTemps, 5000 );
}
window.onload = ReadTemps;
</script>
</head>
<body>
<a href="javascript:ReadTemps();">Update</a>
</body>
</html>

如果我在 ReadTemps 中添加警报(“hello”),它会每 5 秒弹出一次。

解决方案

<script>
var bgImg = new Image();
stillImg.src = 'image.jpg';

function ReadTemps()
{
var vessel_temp = loadXMLDoc( 'get_vessel.php' );

var c = document.getElementById( "myCanvas" );
var ctx = c.getContext( "2d" );

ctx.drawImage( bgImg, 0, 0 );

ctx.font="20px Georgia";
ctx.fillText( vessel_temp + '\u00B0', 330, 430 );

setTimeout( ReadTemps, 5000 );
}

function loadXMLDoc( file )
{
var xmlhttp;
if( window.XMLHttpRequest )
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );

xmlhttp.open( "GET", file, false );
xmlhttp.send( null );

if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
return xmlhttp.responseText;
else
return "error";
}
window.onload = ReadTemps;
</script>

最佳答案

答案很简单,您必须使用 AJAX,而不是在 Javascript 中包含 PHP 代码,您必须创建一个 php 文件 (get_temp.php) 并通过 AJAX 调用获取其内容。

首先,创建 get_temp.php 文件:

<?php // get_temp.php
print round( floatval( file_get_contents( '/mnt/1wire/uncached/vessel/temperature' ) ), 2 );
die;
?>

其次,调整您的 Javascript 代码以执行 AJAX 调用:

<script>
var bgImg = new Image();
bgImg.src = 'image.jpg';

function ReadTemps() {
loadXMLDoc('get_temp.php');
setInterval(loadXMLDoc, 5000, 'get_temp.php');
}

function ShowTemp(temp){
var c = document.getElementById( "myCanvas" );
var ctx = c.getContext( "2d" );

ctx.drawImage( bgImg, 0, 0 );

ctx.font="20px Georgia";
ctx.fillText( temp + '\u00B0', 330, 430 );
}

function loadXMLDoc(file) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
ShowTemp(xmlhttp.responseText);
}
}
xmlhttp.open("GET",file,true);
xmlhttp.send();
}

window.onload = ReadTemps;
</script>

如您所见,我在您的代码中添加了一个 loadXMLDoc,该函数对服务器中的任何文件进行 AJAX 调用。

当然,您可以使用 jQuery 来执行相同的操作,但它会增加客户端的加载时间,如果您只需要执行 AJAX 调用,则完全没有必要。

希望对你有帮助!

关于javascript - 从 javascript 调用 PHP 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22098312/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com