动态图表php没有将数据发送到$.getjson(“，function(){})

lbsnaicq 于 2021-06-21 发布在 Mysql

关注(0)|答案(1)|浏览(292)

我想让用户提供的动态图表输入发送到ajax函数 drawgraph() .
ajax函数应该向php发送数据，php应该向 $.getJSON("myphpService.php", function(result) .
它什么也看不出来。
从mysql数据库中选择数据用户输入开始日期和结束日期。

绘图.html

<html>
  <head>
    <title></title>
  </head> 
<body>
    <div class="container-fluid">

      <div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
    </div>
    </div>
    <input type="date" name="gsdate" id="gsdate"></div>
    <input type="date" name="gedate" id="gedate"></div>
    <select name="gitem" id="gitem">
      <option value="">Select item</option>
      <option value="SetPoint">Set Point</option>
      <option value="SupplyWater">Supply Water</option>
      <option value="ReturnWater">Return Water</option>
      <option value="SupplyAir">Supply Air</option>
      <option value="ReturnAir">Return Air</option>
      <option value="Actuator">Actuator</option>
      <option value="CO2">CO<sub>2</sub></option>
    </select>
    <select name="gAHU" id="gAHU">
      <option value="">Select AHU</option>
      <option value="AHU 1-1">AHU 1-1</option>
      <option value="AHU 1-2">AHU 1-2</option>
      <option value="AHU 2-1">AHU 2-1</option>
      <option value="AHU 2-2">AHU 2-2</option>
      <option value="AHU 3-1">AHU 3-1</option>
      <option value="AHU 3-2">AHU 3-2</option>
      <option value="AHU 4-1">AHU 4-1</option>
      <option value="AHU 4-2">AHU 4-2</option>
      <option value="AHU 5-1">AHU 5-1</option>
      <option value="AHU 5-2">AHU 5-2</option>
      <option value="AHU 6-1">AHU 6-1</option>
      <option value="AHU 6-2">AHU 6-2</option>
      <option value="AHU 7-1">AHU 7-1</option>
      <option value="AHU 7-2">AHU 7-2</option>
      <option value="AHU 8-1">AHU 8-1</option>
      <option value="AHU 8-2">AHU 8-2</option>
      <option value="AHU 9-1">AHU 9-1</option>
      <option value="AHU 9-2">AHU 9-2</option>
      <option value="AHU 10-1">AHU 10-1</option>
      <option value="AHU 10-2">AHU 10-2</option>
      <option value="AHU 11-1">AHU 11-1</option>
      <option value="AHU 11-2">AHU 11-2</option>
      <option value="AHU 12-1">AHU 12-1</option>
      <option value="AHU 12-2">AHU 12-2</option>
      <option value="AHU 13-1">AHU 13-1</option>
      <option value="AHU 13-2">AHU 13-2</option>
      <option value="AHU 14-1">AHU 14-1</option>
      <option value="AHU 14-2">AHU 14-2</option>
      <option value="AHU 15-1">AHU 15-1</option>
      <option value="AHU 15-2">AHU 15-2</option>
      <option value="AHU 16-1">AHU 16-1</option>
      <option value="AHU 16-2">AHU 16-2</option>
      <option value="AHU 17-1">AHU 17-1</option>
      <option value="AHU 17-2">AHU 17-2</option>
      <option value="AHU CP 2-3">AHU CP 2-3</option>
      <option value="AHU CP 3-3 ">AHU CP 3-3 </option>
      <option value="AHU CP 3-4">AHU CP 3-4</option>
      <option value="AHU CP 5-1">AHU CP 5-1</option>
      <option value="AHU CP 5-2">AHU CP 5-2</option>
      <option value="AHU CP 5-3">AHU CP 5-3</option>
      <option value="AHU CP 5-1 PH">AHU CP 5-1 PH</option>
      <option value="AHU CP 6-1">AHU CP 6-1</option>
      <option value="AHU CP 6-2">AHU CP 6-2</option>
      <option value="AHU CP 6-3">AHU CP 6-3</option>
      <option value="AHU CP 6-4">AHU CP 6-4</option>
      <option value="AHU CP 6-1 PH">AHU CP 6-1 PH</option>
    </select>
    <button type="button" id="run" onclick="drawgraph()">Draw Graph</button>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script type="text/javascript">
      function drawgraph()
      {
          var gsdate  = $("#gsdate").val();
          var gedate  = $("#gedate").val();
          var gAHU    = $("#gAHU").val();
          var gitem   = $('#gitem').val();

            DataArray = 
          {

            "gsdate"    : gsdate,
            "gedate"    : gedate,
            "gAHU"      : gAHU ,
            "gitem"     : gitem 
          }
          $.ajax({
              type:"POST",
              url : "myphpService.php",
              data : DataArray,
              datatype : 'html',
          }).done(function(data,Status)
          {
            $("#gmessage").html(data);

          })

      }

      $.getJSON("myphpService.php", function(result)
      {
                var dps= [];

      for(var i=0; i<result.length;i++)
      {
         dps.push({
                    "label":result[i].year, 
                    "y":[result[i].minivalue,result[i].maxivalue]
                  });

      }

      var chart = new CanvasJS.Chart("chartContainer",
       {
          animationEnabled:true,
          title:
          {
              text: "BMS Performance Monitroing",
          },
          axisX:
          {
              title: "Date",
          },

          axisY:
            {
              title: "Range",
          },

          data: [{
              type: "rangeColumn",
              dataPoints: dps
                  }]
      });

      chart.render();

      });

    </script>
  </body>
</html>

myphpservice.php

<?php
  $con=mysqli_connect("localhost","root","") or 
                             die("Server Error" .mysql_error());
  mysqli_select_db($con,"bms") or die("Database Error" . mysql_error());

       $gsdate = $_POST['gsdate'];
     $gedate    = $_POST['gedate'];
     $gAHU  = $_POST['gAHU'];
     $gitem = $_POST['gitem'];

        $query =  "select AHU,MAX($gitem) as maxivalue,MIN($gitem) as minivalue,
                   cast(dateandtime as date) as sdate 
                 from bmspm WHERE AHU='$gAHU' and 
                   cast(dateandtime as date)>'$gsdate' 
                 and cast(dateandtime as date)<='$gedate'
                   GROUP by cast(dateandtime as date)" ;

              $result = mysqli_query($con,$query)or 
                   die("Query Error".mysql_error());

               $data_points = array();

      while ($row=mysqli_fetch_array($result))
    {       

         $point = array

        (
            'AHU'=>$row['AHU'],
            'maxivalue'=>$row['maxivalue'],
            'minivalue'=>$row['minivalue'],
            'year'=>$row['sdate']
        );

        array_push($data_points, $point);

    }   

      echo json_encode($data_points, JSON_NUMERIC_CHECK);

        mysqli_close($con);         
  ?>

mysql jquery ajax

来源：https://stackoverflow.com/questions/48140702/dynamic-chart-php-did-not-send-data-to-getjson-function

1条答案

按热度按时间

我只能在一定程度上帮助你：
（1）打开php错误报告。这通常会指示php脚本是否有错误。使用浏览器的开发人员工具监视和分析请求。
（2）据我所知，您应该只需要发出一个ajax请求。用户单击按钮触发ajax请求以获取json响应。
（3）修改html代码并简化js代码

<!-- wrap input elements within a form -->
<form id="form-graph">
    <input type="date" name="gsdate" id="gsdate"></div>
    <input type="date" name="gedate" id="gedate"></div>
    <select name="gitem" id="gitem">
        <!-- ... -->
    </select>
    <select name="gAHU" id="gAHU">
        <!-- ... -->
    </select>
    <!-- change type to submit -->
    <button type="submit" id="run">Draw Graph</button>
</form>

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">

  // when user submits the form
  $('#form-graph').submit(function drawgraph(e) {
      e.preventDefault();
      var form = $(this);
      // make request to PHP script while passing form values
      $.getJSON('myphpService.php', form.serialize(), function (data) {
          // then convert response for the chart
          var dps = $.map(data, function (d) {
              return {
                  "label": d.year, 
                  "y": [d.minivalue, d.maxivalue]
              }
          });

          var chart = new CanvasJS.Chart("chartContainer", /* ... */);

          chart.render();
      })
  });

赞(0）回复(0）举报 2021-06-21

相关问题

热门标签

Java query python Node 开发语言 request Util 数据库 Table 后端算法 Logger Message Element Parser

最新问答

xxl-job 安全组扫描到执行器端口服务存在信息泄露漏洞
回答(1) 发布于 4个月前
xxl-job 不能和nacos兼容？
回答(3) 发布于 4个月前
xxl-job 任务执行完后无法结束，日志一直转圈
回答(3) 发布于 4个月前
xxl-job-admin页面上查看调度日志样式问题
回答(1) 发布于 4个月前
xxl-job 参数512字符限制能否去掉
回答(1) 发布于 4个月前