从javascript调用PHP函数

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

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

我的问题

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添加警报（ “你好”），它会弹出每隔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>

来源

2014-02-28 John

谁会拿这个？ :) 好的。这是因为每次重新加载页面只生成一次，所以您的vessel_temp值只在页面生成时定义 - 您必须使用称为AJAX的东西。对不起，但我没有更多时间向你解释这一点。 –

@TK先生我想我明白了。将检查出AJAX。 – John

请参阅[此问题]（http://stackoverflow.com/q/4542863/1267304）。是ajax网络上数以千计的例子之一。 – DontVoteMeDown

答案很简单，你必须使用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调用就完全没有必要了。

希望它能帮助！

来源

2014-02-28 15:14:09

这打印：undefined° 它可以是document.getElementById（“myDiv”）。innerHTML = xmlhttp.responseText ;? 尝试将myDiv更改为myCanvas。没有帮助.. – John

Do'h！我重复使用旧的代码来回答，而且我犯了很多错误！我编辑了答案......我的歉意。 –

你想要的是通过使用AJAX来实现的。使用AJAX，您可以调用PHP脚本，该脚本将被执行并向已加载的站点返回一个值。这个值可以用javascript来处理。因此，您可以每5秒调用一次PHP脚本并处理该值。

要了解如何做到这一点正好看看@MDN

来源

2014-02-28 14:51:35 mhafellner

请不要链接到[W3Schools]（http://www.w3fools.com/）关节。 – DontVoteMeDown

你有一点，MDN实际上是更好的方式。 – mhafellner

-1

你想要做的是执行你的PHP函数get_vessel_temp()每五秒钟。

你的问题是PHP代码只能在服务器端执行一次。它不能直接在客户端执行。

你有两种解决方案：你的函数不是很复杂（没有数据库调用，否则？），然后你可以用Javascript重写它。或者你将不得不执行AJAX调用。

AJAX允许您执行从客户端浏览器到服务器（到您的案例中的PHP文件）的请求。你可以在这里找到信息：https://api.jquery.com/jQuery.ajax/

来源

2014-02-28 14:53:20 Theox

为什么要使用jQuery？他只需要做一个AJAX调用！ –

从javascript调用PHP函数

回答

相关问题