javascript - 如何从php获取数据到jquery

Question

我有 .php 文件和 js 文件。我正在尝试制作条形图。现在我已经选择了一些数据到我的数据库中。现在我不知道如何将数据从 .php 文件获取到 .js 文件。

我有这个代码:

//.js文件

var data, options;

// replace this data with my selected data
data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
        [19, 29, 28, 44, 39, 48, 54],
    ]
};

options = {
    height: 300,
    showArea: true,
    showLine: true,
    showPoint: true,
    fullWidth: true,
    axisX: {
        showGrid: false
    },
    lineSmooth: false,
};

new Chartist.Line('#headline-chart', data, options);

/PHP 文件/

    $chart6 = $controller->runQuery("SELECT DATE(pay_date) `DATE`, SUM(amount) daily_amount, DATE_FORMAT(pay_date,'%a') DAYNAME FROM tbl_paid WHERE DATE(pay_date) BETWEEN DATE(:today) - INTERVAL 1 WEEK AND DATE(:today) GROUP BY DATE(pay_date);"); 
    $chart6->execute(array(":today"=>$today));
    while($fetch = $chart6->fetch(PDO::FETCH_ASSOC))
   {
          $data ="{labels:".$fetch['DATE']."-".$fetch['DAYNAME']." series:".$fetch['daily_amount']."}";
   }

Answer 1

您可以在 javascript 中阅读有关 ajax 的信息，并发出一个从 PHP 获取 json 对象的 ajax 请求，然后在您的 javascript 中处理该对象:

示例(对您的 PHP 代码进行了一些改进)

PHP

$chart6 = $controller->runQuery("SELECT DATE(pay_date) `DATE`, SUM(amount) daily_amount, DATE_FORMAT(pay_date,'%a') DAYNAME FROM tbl_paid WHERE DATE(pay_date) BETWEEN DATE(:today) - INTERVAL 1 WEEK AND DATE(:today) GROUP BY DATE(pay_date);"); 
$chart6->execute(array(":today"=>$today));
$labels = array();
$series = array()
while($fetch = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $labels[] = $fetch['DAYNAME'];
  $series0[] = $fetch['daily_amount'];
}
$series[] = $series0;

// add the labels and series to an array, then convert that to json
$data = array('labels' => $labels, 'series' => $series);
echo json_encode($data);

JS:

// Make an Ajax request, here I am using jQuery $.getJSON  but you can use $.get or $.post if you need to have it as a post request, or even $.ajax

$.getJSON('https://example.com/database_fetch_page.php', function(data) {
  new Chartist.Line('#headline-chart', data, options);
});