如何将我的代码分离到不同的 php 文件?

How to seperate my code to different php file?

我有使用 flot 库绘制绘图的代码。 plot 的数据在我的本地数据库中。

在一个文件中有 php、javascript 和 html 代码。我怎样才能将 php 代码分离到不同的文件中,这样就只剩下 html 和 javascript.

代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src='js/flot/jquery.flot.min.js'></script>
    </head>
    <body>
    <div id="placeholder" style="width:600px;height:300px;"></div>
    <?php
    $server = "localhost";
    $user="root";
    $password="";  
    $database = "testing";
    $connection = mysqli_connect($server,$user,$password,$database);

    $query = "SELECT longLocation, latLocation FROM coords";
    $result = $connection->query($query);   

    while($row = mysqli_fetch_assoc($result))
    {
        $dataset1[] = array($row['longLocation'],$row['latLocation']);
    }

   ?>
   <script type="text/javascript">
    $(function () {
   var dataset1 = <?php echo json_encode($dataset1); ?>;
   $.plot("#placeholder", [ dataset1 ]);
   });
   </script>
   </body>
   </html>

如果您想删除文件中的所有 php 代码,您需要使用 AJAX。你最终会得到 2 个文件,一个包含 html 和 PHP 文件,它们将打印出 json 编码数据。

index.html:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src='js/flot/jquery.flot.min.js'></script>
</head>
<body>
  <div id="placeholder" style="width:600px;height:300px;"></div>
  <script type="text/javascript">
    $(function () {
      $.getJSON('get_data.php', {}, function (data) {
        $.plot("#placeholder", [ data ]);
      });
    });
  </script>
</body>
</html>

get_data.php:

<?php
$server = "localhost";
$user="root";
$password="";  
$database = "testing";
$connection = mysqli_connect($server,$user,$password,$database);

$query = "SELECT longLocation, latLocation FROM coords";
$result = $connection->query($query);   

$dataset = [];

while($row = mysqli_fetch_assoc($result))
{
    $dataset[] = array($row['longLocation'],$row['latLocation']);
}

echo json_encode($dataset);