如何將包含在HTML頁面中的變量傳遞給PHP，然後用JS顯示它 - Chart.js

我需要在我的網站上顯示一個圖表（來自SQL數據）。所以我決定使用chart.js。我在互聯網上找到了一個例子。但我有一個問題：如何將包含在HTML頁面中的變量傳遞給PHP，然後用JS顯示它 - 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) { 

     } 
    }); 
});

來源

2017-08-30 user46510

你在談論這樣的事情？

在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

這是你腦子裏有什麼？

來源

2017-08-30 08:23:44

NOP，這不是真的，我想獲得一個變量形式的這部分（HTML）：

我想在PHP文件上使用它。在我的請求中添加一個WHERE SQL： //獲得連接 $ mysqli = new mysqli（DB_HOST，DB_USERNAME，DB_PASSWORD，DB_NAME）; – user46510

那麼，只需在你想要的地方添加回聲？編輯我的回答 –

我真的很抱歉，但我不明白你說什麼。我有一個變量，就像我說的HTML中的$變量，我想在PHP中讀取它，所以我不明白爲什麼我們做一個'POST' – user46510

@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文件。要添加一個WHERE上我的要求SQL：

<?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); 
 
?>

來源

2017-08-30 17:07:39 user46510

如何將包含在HTML頁面中的變量傳遞給PHP，然後用JS顯示它 - Chart.js

回答

相關問題