javascript - 在 Javascript 中调用 *reusable* PHP 代码

问题描述

目前我有一个 index.php 文件，其中包含 PHP 和 Javascript 代码。

PHP 代码访问 SQLite 数据库，并将数据放入两个数组中，然后我在 Javascript 代码中使用它们来填充条形图。

我现在希望在 Javascript 中随时调用 PHP 代码，但不知道正确的方法，并且我对示例的尝试失败了。

另外我认为理想情况下我需要更改 PHP 代码，以便它返回数组，以便我可以使用它们进行比较等。

这是我第一次涉足 PHP 和 Javascript。

代码：

<?php
        $db = new SQLite3('/var/www/html/newdb.db');
        $result = ($db->query('SELECT * FROM NUMBERS'));
        $avg_stack = array();
        $name_stack = array();
        while ($res = $result->fetchArray(SQLITE3_ASSOC)){
                $avg = $res["AVG"];
                $name = $res["NAME"];
                array_push($avg_stack, $avg);
                array_push($name_stack, $name);
        }
        $db->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss">
  <title>My Chart.js Chart</title>
</head>
<body>
    <div id="demo" class="container">
    <canvas id="myChart"></canvas>
    <input type="button" value="Update Table" onclick="updatetable()">
  </div>

  <script>

  var data_array = [];
  var name_array = [];
  var colour_array = [];
  var dynamicColour = function() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
  };
  var massPopChart = Chart;

  function createchart() {

    data_array = [<?php echo '"'.implode('","', $avg_stack).'"' ?>];
    name_array = [<?php echo '"'.implode('","', $name_stack).'"' ?>];

    for (var i in data_array) {
        colour_array.push(dynamicColour());
    }

    let myChart = document.getElementById('myChart').getContext('2d');
        massPopChart = new Chart(myChart, {
                  type:'bar',
                  data:{
                        labels:name_array, // This to be replaced by return result of PHP
                        datasets:[{
                          label:'Population',
                          data:data_array, // This to be replaced by return result of PHP
                          backgroundColor:colour_array,
                          borderWidth:1,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                        }]
                  },
                  options:{
                  }
                });
  }

  function updatetable() {
        window.location.reload(true);
        setInterval(function(){

                // HERE I WANT TO RUN THE PHP CODE AGAIN

                var newposition = data_array.length;
                data_array.push(Math.floor(Math.random() * 700000) + 5000);
                colour_array.push(dynamicColour());
                massPopChart.data.datasets[0].data[newposition] = data_array[newposition];
                massPopChart.data.labels[newposition] = "Newly Added";
                massPopChart.update();
        }, 3000);
  }

  createchart();

  </script>

</body>
</html>

标签： javascriptphp

javascript - 在 Javascript 中调用 reusable PHP 代码

问题描述

解决方案

推荐阅读