从javascript调用的PHP函数
我正在尝试为一个Raspberry Pi制作一个简单的web。它应该使用php和JavaScript在图像上绘制一个温度值。
我将在PHP和我正在编写的C++应用程序之间使用一些IPC。但是现在我只想从一个文件中读取一个值并在图像上绘制它。(该文件是使用OWFS的1有线总线的温度值)
我的问题
- 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>回答 3
Stack Overflow用户
发布于 2014-02-28 15:14:09
答案很简单，您必须使用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调用，则完全没有必要。
希望能帮上忙！
Stack Overflow用户
发布于 2014-02-28 14:51:35
您想要的是通过使用AJAX实现的。使用AJAX，您可以调用一个PHP脚本，该脚本将被执行，并将一个值返回给已经加载的站点。然后可以使用javascript处理此值。因此，您可以每5秒调用PHP脚本并处理该值。
要确切地理解如何做到这一点，请查看@ MDN
Stack Overflow用户
发布于 2014-02-28 14:53:20
您要做的是每5秒执行一次PHP函数get_vessel_temp()。
您的问题是PHP代码只在服务器端执行一次。它不能直接在客户端执行。
您有两个解决方案:要么您的函数不是非常复杂(没有数据库调用，要么是其他?)，然后您可以用Javascript重写它。否则，您将不得不执行AJAX调用。
AJAX允许您执行请求，从客户端浏览器到服务器(在您的情况下是PHP文件)。您可以在这里找到信息：https://api.jquery.com/jQuery.ajax/
https://stackoverflow.com/questions/22098312
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号