Question

我需要在我的网站上显示一个图表（来自SQL数据）。所以我决定使用chart.js。我在互联网上找到了一个例子。但我有一个问题：

我想知道如何将HTML页面中包含的变量传递给PHP（发出请求sql），然后用JS显示它。我找不到这些信息。你能帮帮我吗？

这是一个例子：

HTML：

<html>
  <head>
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/Chart.min.js"></script>
    <script type="text/javascript" src="assets/js/linegraph.js"></script>
  </head>

 <body>
   <header>
   </header>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>
  </body>
</html>

PHP：

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '*****');
define('DB_NAME', 'Michel');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = 'SELECT heure, payload FROM reception ORDER BY date DESC LIMIT 10';

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>

JS：

$(document).ready(function(){
    $.ajax({
        url : "graphdata.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var heure = [];
            var payload = [];

            for(var i in data) {
                heure.push("Heure " + data[i].heure);
                payload.push(data[i].payload);
            }

            var chartdata = {
                labels: heure,
                datasets: [
                    {
                        label: "payload",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: payload
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error : function(data) {

        }
    });
});

Answer 1

你在谈论这样的事吗？

在JS方面：

$.ajax({
  url: 'test.php',
  method: 'POST',
  data: {
    filter: '<?php echo $Variable; ?>',
  },
  success: function(r) {
    console.log(r);
  }
});

然后，在PHP端你可以使用

<?php
  echo $_POST['filter']; //outputs someValue

这是你的想法吗？

Answer 2

@Damir Kasipovic Nop，事实并非如此，我想从这部分得到一个变量形式（HTML）：

<html>
  <head>
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/Chart.min.js"></script>
    <script type="text/javascript" src="assets/js/linegraph.js"></script>
  </head>

 <body>
   <header>
   </header>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
      
      <?php
        $Variable ='1'; // Exemple
    </div>
  </body>

我想在PHP文件中使用它。在我的请求SQL上添加WHERE：

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '*****');
define('DB_NAME', 'Michel');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = 'SELECT heure, payload FROM reception WHERE variable ='".variable.'" ORDER BY date DESC LIMIT 10';

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>

如何将HTML页面中包含的变量传递给PHP，然后使用JS-Chart.js显示它

2 个答案: