时间戳

首页 > 解决方案 > 如何从php获取数据到jquery

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

问题描述

我有 .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']."}";
   }

标签： javascriptphpjquery

解决方案

您可以阅读 javascript 中的 ajax 并发出 ajax 请求，从 PHP 获取 json 对象，然后在您的 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);
});

推荐阅读