從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函數

回答

相關問題