【问题标题】:Execute SQL prepared statement in AJAX在 AJAX 中执行 SQL 准备语句
【发布时间】:2018-08-17 18:27:25
【问题描述】:

我可以通过 Chart.js 成功创建图表。问题是我想根据特定客户的 ID 生成图表。例如,如果我要拜访客户http://localhost/test/view_customer?customer_id=21&operation=edit。我想使用客户 ID 21 的 bdi 与日期来生成图表。

我尝试了许多不同的解决方案,但都没有成功。我想知道是否有通过 AJAX 执行 SQL 请求并使用该数据生成图形的方法。

这是我的 SQL 代码,它从 URL 中获取 ID 并生成一个可由 chart.js 读取以创建折线图的字符串:

<?php
//Gets customer ID from URL 
$cid = htmlentities ($_GET['customer_id']);
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");

$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
  $data[] = array('bdi' => $bdi, 'date' => $date);
}
//free memory associated with result
$result->close();

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

这是我用来生成折线图的代码:

$(document).ready(function(){
  $.ajax({
    url: "http://localhost/test/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var bdi = [];
      var date = [];

      for(var i in data) {
        date.push( data[i].date);
        bdi.push(data[i].bdi);
      }

      var chartdata = {
        labels: date,
        datasets : [
          {
            label: 'BDI',
            backgroundColor: 'rgba(239, 243, 255, 0.75)',
            borderColor: 'rgba(84, 132, 255, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',

            data: bdi
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
        options: {
          responsive: true,
          legend: {
            position: 'bottom',

          },
          scales: {
            yAxes: [{
              ticks: {
                fontColor: "rgba(0,0,0,0.5)",
                fontStyle: "bold",
                beginAtZero: true,
                maxTicksLimit: 5,
                padding: 20
              },
              gridLines: {
                drawTicks: false,
                drawBorder: false,

              }
            }],
            xAxes: [{
              gridLines: {
                zeroLineColor: "transparent",
                display: false
              },
              ticks: {
                padding: 20,
                fontColor: "rgba(0,0,0,0.5)",
                fontStyle: "bold"
              }
            }]
          },

          tooltips: {
            backgroundColor: 'rgba(255,255,255)',
            titleFontColor: 'rgb(184,189,201)',
            bodyFontColor: 'black',
            displayColors: false,
            borderColor: 'rgb(214,217,225)',
            borderWidth: 1,
            caretSize: 5,
            cornerRadius: 2,
            xPadding: 10,
            yPadding: 10
          }
        }
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

目前我使用的 URL http://localhost/test/data.php 包含一串数据:

[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]

而不是使用 URL 来链接数据。我希望 AJAX 运行我的 SQL 代码并生成图形(其中treatment_fk 是一个变量)。

问题:

1.是否可以在 AJAX 中执行 SQL 命令来生成图表,其中 ID 是从 URL 收集的变量?(我该怎么做?)

2。有没有更好的办法?我该怎么做?

【问题讨论】:

标签: php jquery sql ajax chart.js


【解决方案1】:

苹果向ajax请求添加一个参数

$.ajax({
    url: "data.php",
    data: { 
        "ChartType": 1/*Or change to drop down selection id*/,
        "customer_id":1
    },
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr) {

    }
});

你可以在上面看到ChartType,动态传递它的值,你想为它分离sql查询/

现在在服务器端:

$cid = htmlentities ($_GET['customer_id']);
$cType = htmlentities ($_GET['ChartType']);

if($cType==1)
    $sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");
else if($cType==2)
    $sql = sprintf("SELECT __ other column name __ WHERE cid=$cid");
else 
    $sql = sprintf("SELECT __ other column name __ WHERE cid=$cid");

我知道这不是完整的代码,但它会让你知道如何去做。

【讨论】:

  • 我明白了,把数据发回去怎么样?
  • 您可以以所需的任何格式回显查询结果。这些结果将在response 中提供。
猜你喜欢
  • 2020-11-13
  • 1970-01-01
  • 1970-01-01
  • 2010-11-06
  • 2012-07-06
  • 2014-06-16
  • 2013-12-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多