将PHP变量与jQuery/Javascript结合起来

问题描述：

我在我的管理面板上工作，并且遇到了问题。我正在使用一个输出我的服务器CPU使用率的小脚本，我想将它集成到一个javascript图表中。我无法得到它的工作.. 我想知道如何在JavaScript图表中进行变量工作。将PHP变量与jQuery/Javascript结合起来

我的PHP：

<?php 

$stat1 = file('/proc/stat'); 
sleep(1); 
$stat2 = file('/proc/stat'); 
$info1 = explode(" ", preg_replace("!cpu +!", "", $stat1[0])); 
$info2 = explode(" ", preg_replace("!cpu +!", "", $stat2[0])); 
$dif = array(); 
$dif['user'] = $info2[0] - $info1[0]; 
$dif['nice'] = $info2[1] - $info1[1]; 
$dif['sys'] = $info2[2] - $info1[2]; 
$dif['idle'] = $info2[3] - $info1[3]; 
$total = array_sum($dif); 
$cpu = array(); 
foreach($dif as $x=>$y) $cpu[$x] = round($y/$total * 100, 1); 
$usedcpu = $cpu['user'] + $cpu['nice'] + $cpu['sys']; 

?>

而且我的javascript

<script> 
    $(document).ready(function() { 

     // Demo #1 
     // we use an inline data source in the example, usually data would be fetched from a server 
     var data = "<?php echo $usedcpu; ?>"; 
     function getData() { 
      return data; 
     } 

     // setup control widget 
     var updateInterval = 30; 
     $("#updateInterval").val(updateInterval).change(function() { 
      var v = $(this).val(); 
      if (v && !isNaN(+v)) { 
       updateInterval = +v; 
      if (updateInterval < 1) 
       updateInterval = 1; 
      if (updateInterval > 2000) 
       updateInterval = 2000; 
      $(this).val("" + updateInterval); 
      } 
     }); 

     // setup plot 
     var options = { 
      series: { 
       shadowSize: 0, 
       color: '#c0382b', 
       lines: { 
        fill: true 
       } 
      }, // drawing is faster without shadows 
      yaxis: { min: 0, max: 10 }, 
      xaxis: { show: false }, 
      grid: { backgroundColor: '#ffffff', borderColor: 'transparent' }, 
     }; 
     var plot = $.plot($("#demo-1"), [ getData() ], options); 

     function update() { 
      plot.setData([ getData() ]); 
      // since the axes don't change, we don't need to call plot.setupGrid() 
      plot.draw(); 
      setTimeout(update, updateInterval); 
     } 

     update(); 

    }); 
</script>

我希望你们能帮助我，在此先感谢！

问题是什么？ – Jon 2013-04-29 23:25:53

很抱歉，如果不是很清楚，我想让图表中的variabe $ usedcpu工作 – wouterdz 2013-04-29 23:27:08

'和我的jQuery'如果在页面中包含'jquery.js'，那么您的javascript不会变成_jquery_并且它应该被称为JavaScript的。 – Ejaz 2013-04-29 23:27:50

答

您可以使用PHP编写JS，但不能使用其他方法。 PHP是服务器端，JS是客户端。

您可以通过让PHP构建javascript来将.php文件用作'javascript文件'。

当然，你将不得不把它包装在<script>区块并通过php包含它。

<script type="text/javascript"> 
//Stuff 
<?php 
    $someVar = 'some string'; 
    echo "var jsVariable = '{$someVar}';"; 
?> 
//more stuff 
</script>

虽然这是相当复杂，可以得到凌乱快。为什么不使用PHP创建JSON并使用JS解释？

我做了一个变量称为数据在Javascript中，我想我做了它像你告诉我，但如果我想添加它的情节（JavaScript）它没有工作。 – wouterdz 2013-04-29 23:47:33

答

我会建议将您的值从PHP放入一个隐藏的HTML字段与唯一的ID。然后在您的JavaScript中，您可以获取该值。只是一种做法。

但我现在做的方式是不正确的？只需将PHP变量放入js中？ – wouterdz 2013-04-29 23:57:57

嗯，我从来没有这样做过，所以我不能肯定地说。但最好将你的javascript和php代码分离成单独的文件。这将是最佳实践，更容易重用代码并修复可能出现的任何问题 – Yeak 2013-04-30 23:48:28

答

由于$usedcpu是您想要在图中使用的数字，因此不希望JavaScript var中的引号出现。下面将创建一个名为usedcpu一个javascript变量，你可以在剧情代码中使用：

<script type="text/javascript"> 
    <php? 
     echo "var usedcpu = " . $usedcpu . ";" 
    ?> 
</script>

将PHP变量与jQuery/Javascript结合起来

相关推荐