从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