在HTML中使用PHP变量的最简单方法


Easiest ways to use vars from PHP in HTML

我使用的是谷歌图表,我需要从PHP文件(或HTML文件中的PHP?)中获取数据,以将数据馈送到图表。那么我该如何做到这一点,并确保在绘制图表之前获取数据。我已经弄清楚了如何使用PHP 从Mysql数据库中获取数据

这是我需要在中放入vars的代码

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Color');
        data.addColumn('number', 'Votees ');
        data.addRows([
          ['Value from Mysql', 3000],
          ['Value2 from Mysql', 13000],
        ]);
        // Set chart options
        var options = {'title':'Table Name From MySql',
                       'width':600,
                       'height':450};
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
      <div id="chart_div"></div> 

  </body>
</html>

HTML中没有这样的变量-我认为你的意思是,你希望能够在谷歌图表的代码中使用PHP值。我没有太多使用Goggle图表的经验,但据我所见,它使用了一些JavaScript API。也许你正在寻找的是一种将你的值转换为JavaScript变量的方法,这样你就可以在处理图表插件时使用它们。

这正是PHP的初衷——获取静态静态内容并嵌入脚本,为其提供动态内容。

例如,您可以让PHP初始化一个JavaScript变量

<?php
  $some_php_var = 'overflow';
?>
<script type="text/javascript">
  var stack = '<?php echo $some_php_var; ?>';
</script>

现在您将有一个名为stack的JavaScript变量,其值将为"overflow"。


同样的技术可以在任何地方使用,即使是在变量定义的中间。让我们以您的代码为例-

// Set chart options
var options = {
  'title':'<?php echo $dbResult['Table Name'] ?>',
  'width':600,
  'height':450
};

data.addRows([
  ['<?php echo $dbResult['value1']; ?>', 3000],
  ['<?php echo $dbResult['value2']; ?>', 13000],
]);

您可以像这样插入PHP中的值:

  <?php echo $myVariableName; ?>

最简单的例子:在PHP文件中,比如index.PHP

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<?php
echo $the_data_as_a_string;
?>
</body>

更好的方法是实际打开一个text/plain类型的脚本标记,并将数据转储到那里。

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script id="the-data" type="text/html" ><?php echo $the_data_as_a_string; ?></script>
<script type="text/javascript" >
    var data = document.getElementById('the-data').innerHTML;
</script>
</body>

顶部的脚本标签不会被浏览器执行,但底部的标签仍然可以作为字符串访问它的内容,并用它做任何需要的事情。

编辑:

其优点是,您可以安全地编写.js文件,并将其作为静态文件包括在内,因此它们将被浏览器缓存。

此外,您还可以包含数据脚本,这样即使html也是静态的=每次都不会更改=由浏览器缓存。

请注意,这只是一个懒人对数据的ajax请求,您应该考虑一下。:)