Question

我有两个文件。一个是tempTesting.php，另一个是使用flot来绘制project.html上显示的数据。但我无法从tempTesting.php中获取值并将其显示在project.html上。当我运行project.html时，它在这一行上给出了语法错误：

var dat = <?php echo $return; ?>;

tempTesting.php

<?php
$return="[123456789,22.55],[234567891,22.32]";
$maxtemp=-10;
$mintemp=50;
?>

project.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Flot For Temperature Project</title>  


        <script src="jquery.js" language="javascript" type="text/javascript"></script>  
        <script src="jquery.flot.js" language="javascript" type="text/javascript"></script>  
        <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->  
        <script type="text/javascript" src="jquery.flot.time.js"></script>   
        <script type="text/javascript" src="jquery.flot.symbol.js"></script>
        <script type="text/javascript" src="jquery.colorhelpers.js"></script>
        <script type="text/javascript" src="jquery.flot.canvas.js"></script>
        <script type="text/javascript" src="jquery.flot.categories.js"></script>
        <script type="text/javascript" src="jquery.flot.crosshair.js"></script>
        <script type="text/javascript" src="jquery.fillbetween.js"></script>
        <script type="text/javascript" src="jquery.flot.image.js"></script>
        <script type="text/javascript" src="jquery.flot.navigate.js"></script>


        <script language="javascript" type="text/javascript">  

        $(function () {
        var dat = <?php echo $return;?>;
        var options = {
          xaxis: { mode: "time", timeformat: "%h:%M %d.%m.%y", labelWidth: "10" },
          series: {
          lines: { show: true, fill: true, fillColor: "rgba(0,0,0,0.2)" },
          points: { show: true, fill: false },
          shadowSize: 5,
          color: "rgba(0,0,0,0.8)"
        },
        grid: { hoverable: true, clickable: true },
        yaxis: { min: <?php echo $mintemp-2;?> , max: <?php echo $maxtemp+2;?>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C" }},
        selection: { mode: "x", color: "rgba(125,0,0,0.6)" },
        legend: { show: true, position: "se", backgroundOpacity: 0.4, backgroundColor: "rgb(255,255,255)", labelBoxBorderColor: "rgb(0,0,0)"},
      };
      var plot = $.plot($("#placeholder"),[ { data: dat, label: "Study Temp", color:"#333"} ], options);
      var overview = $.plot($("#overview"), [ { data: dat, label: "Min: °C, Max: °C", color: "#333"} ], {
        series: {
          color: "rgba(0,0,0,0.8)",
          lines: { show: true, lineWidth: 1, fill: true, fillColor: "rgba(0,0,0,0.2)" },
          shadowSize: 0
        },
          xaxis: { ticks: [], mode: "time" },
          yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
          selection: { mode: "x", color: "rgba(125,0,0,0.6)" },
          legend: { show: true, position: "se", backgroundOpacity: 1, backgroundColor: "rgb(255,255,255)", labelBoxBorderColor: "rgb(0,0,0)" }});
        $("#placeholder").bind("plotselected", function (event, ranges) {
          plot = $.plot($("#placeholder"), [dat],
          $.extend(true, {}, options, {
          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
        }));
        overview.setSelection(ranges, true);
      });
      $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
      });
      var humanTime;
      var jstime;
      function showTimes(t) {
        var datum = new Date(parseFloat(t));
        humanTime = datum.toUTCString();
      }
      function showTooltip(x, y, contents) {
        $('' + contents + '').css( {
          position: 'absolute',
          display: 'none',
          top: y + 25,
          left: x + 0,
          border: '2px solid #777',
          padding: '2px',
          'font-family': 'Arial',
          'font-size:': '1.2em',
          'font-weight': 'bold',
          'background-color': '#ddd',
          opacity: 0.80
        }).appendTo("body").fadeIn(200);
      }
      var previousPoint = null;
      $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
          if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;
            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(0),
            y = item.datapoint[1].toFixed(2);
            showTimes(x);
            showTooltip(item.pageX, item.pageY,
            y + "°C (at " + humanTime + "+1000)");
          }
        }
        else {
          $("#tooltip").remove();
          previousPoint = null;
        }
      });
    });
        </script>  
        </head >

            <body>  
        <?php
    include('tempTesting.php');

    ?>
        <div id="placeholder" style="height:300px;width=100px;"></div>
        <div id="overview"></div>



        <p>Flot Temperature realtime update. Below here is the Information</p>  

        </body>  
        </html>

Answer 1

您无法在Javascript脚本中调用PHP函数。页面加载时，首先呈现PHP，然后是CSS和Javascript。因此，行var dat = <?php echo $return;?>;无法正常运行。

相反，您可以使用Ajax请求。 Example here

编辑：理解错误的问题。您不能动态地在Javascript函数中使用PHP函数。但是，只访问echo命令有效。

Answer 2

请尝试var dat = "<?php echo $return; ?>";。

如果没有引号，如果$return包含字符串，javascript会将其解释为变量，我认为这不是理想的结果。

此外，我没有设置您的服务器配置来在HTML文件中执行PHP，这不起作用，因为您的文件具有“.html”扩展名。只需将您的文件重命名为'project.php'就可以了。

无法从PHP获取价值并在html上显示

2 个答案: