從javascript調用PHP函數

Question

我正在嘗試為Raspberry Pi創建一個簡單的Web GUI。 應該使用php和JavaScript在圖像上繪制溫度值。

我將在PHP和正在編寫的C ++應用程序之間使用一些IPC。 但是現在我只想從文件中讀取一個值並將其繪制在圖像上。 （該文件是使用OWFS來自1wire總線的溫度值）

我的問題

每5秒調用一次JavaScript函數ReadTemps（），但僅在頁面刷新時更新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添加一個alert（“ 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>

Answer 1

答案很簡單，您必須使用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調用，則完全沒有必要。

希望能幫助到你！

Answer 2

您想要的是通過使用AJAX實現的。 使用AJAX，您可以調用一個PHP腳本，該腳本將被執行並向已加載的站點返回一個值。 然后可以使用javascript處理此值。 因此，您可以每5秒調用一次PHP腳本並處理該值。

要了解如何執行此操作，請@MDN

Answer 3

您要做的是每五秒鍾執行一次PHP函數get_vessel_temp() 。

您的問題是，PHP代碼在服務器端僅執行一次。 它不能直接在客戶端執行。

您有兩種解決方案：要么您的函數不是真的很復雜（無需數據庫調用，否則？），然后可以用Javascript重寫它。 否則，您將必須執行AJAX調用。

AJAX允許您執行一個請求，從客戶端瀏覽器到服務器（對於您的情況，是一個PHP文件）。 您可以在這里找到信息： https : //api.jquery.com/jQuery.ajax/

從javascript調用PHP函數

問題描述

3 個解決方案

解決方案1
1 已采納 2014-02-28 15:14:09

解決方案2
0 2014-02-28 14:51:35

解決方案3
-1 2014-02-28 14:53:20

從javascript調用PHP函數

問題描述

3 個解決方案

解決方案1 1 已采納 2014-02-28 15:14:09

解決方案2 0 2014-02-28 14:51:35

解決方案3 -1 2014-02-28 14:53:20

解決方案1
1 已采納 2014-02-28 15:14:09

解決方案2
0 2014-02-28 14:51:35

解決方案3
-1 2014-02-28 14:53:20