Jquery 从mysql-ajax-js中提取数据的flot图表

我试图从mysql数据库中提取数据，并在flot图表中绘制。我看过几十篇帖子，但对我来说不起作用。 我成功地使flot图表在php中工作

首先，这里是数据的url intellipool.clowst.net.au/PCsystem/getdataforflot.php 它的格式似乎是正确的。 我想画出温度和时间的关系图

加载运行此脚本的页面时，会收到“错误警报”

有一个

     <p> id="graph3" style="width:1000px;height:500px;">graph3</p>

按照我添加的说明

         <header> ('Access-Control-Allow-Origin: *'); </header>

---

打开您的

http://overcast.net.au/js-tests/

链接打开控制台写入以下功能

function ajaxplot() {   
$.ajaxSetup({ cache: false });

$.ajax({
  type: "GET",
  dataType: 'json',
  url: '/getdataforflot.php',
  error: function() {
      alert("An error occurred.");
    },
  success: function(data) {
    debugger;
    alert("got the data dude");
    //var data1 = [[1496765558000,"26"],[1496764656000,"26"],[1496763754000,"26"],[1496762851000,"26"],[1496761949000,"26"]];
    var data1 = data;
    var options = {
      xaxis: {
        mode: "time",
        mintickSize: [1, "hours"],
        axisLabel: 'Time',
         min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
         max: (new Date()).getTime()
      },
      yaxes: [{
        tickFormatter: function(val, axis) {
          return val + "\u00B0C";
        },
        max: 50,
        axisLabel: "Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 5
      }, {
        position: "right",
        tickFormatter: function(val, axis) {
          return val + "%";
        },
        max: 100,
        axisLabel: "Humidity",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 10
      }],
    };
    $.plot("#graph3", data1, options);
    },

});
}

然后

在控制台中调用

ajaxplot（）

，它应该可以工作

见截图

---

在您的控制台中，有许多错误，请全部解决，它应该可以工作。

它只显示请求的资源上没有“Access Control Allow Origin”标题。此错误的含义是什么，因此$ajax url必须与js代码所在的网站完全相同？是的，这正是问题所在您有权访问正在调用的服务器

http://intellipool.overcast.net.au/PCsystem/getdataforflot.php

？如果是，则必须

将CORS

启用到我已将$ajax url文件移动到的服务器‌​惠普，还是不行！如果我也移动所有的.js文件，那会起作用吗？我可以问webhoster是否可以更改“将CORS启用到服务器”这是测试

 function ajaxplot() {  
 document.write('hello!! there ajaxplot() AJAX has been called');
 $.ajaxSetup({ cache: false });

  $.ajax({
    type: "GET",
    dataType: 'json',
    url: 'http://intellipool.overcast.net.au/PCsystem/getdataforflot.php',

    error: function() {
    alert("An error occurred.");
  },
success: function(data) {
   alert("got the data dude");
   var options = {
    xaxis: {
    mode: "time",
    mintickSize: [1, "hours"],
    axisLabel: 'Time',
     min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
     max: (new Date()).getTime()
  },
  yaxes: [{
    tickFormatter: function(val, axis) {
      return val + "\u00B0C";
    },
    max: 50,
    axisLabel: "Temperature",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelPadding: 5
  }, {
    position: "right",
    tickFormatter: function(val, axis) {
      return val + "%";
    },
    max: 100,
    axisLabel: "Humidity",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelPadding: 10
  }],
};
$.plot("#graph3", data, options);
}

 });
}

function ajaxplot() {   
$.ajaxSetup({ cache: false });

$.ajax({
  type: "GET",
  dataType: 'json',
  url: '/getdataforflot.php',
  error: function() {
      alert("An error occurred.");
    },
  success: function(data) {
    debugger;
    alert("got the data dude");
    //var data1 = [[1496765558000,"26"],[1496764656000,"26"],[1496763754000,"26"],[1496762851000,"26"],[1496761949000,"26"]];
    var data1 = data;
    var options = {
      xaxis: {
        mode: "time",
        mintickSize: [1, "hours"],
        axisLabel: 'Time',
         min: ((new Date().getTime()) - 24 * 60 * 60 * 1000),
         max: (new Date()).getTime()
      },
      yaxes: [{
        tickFormatter: function(val, axis) {
          return val + "\u00B0C";
        },
        max: 50,
        axisLabel: "Temperature",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 5
      }, {
        position: "right",
        tickFormatter: function(val, axis) {
          return val + "%";
        },
        max: 100,
        axisLabel: "Humidity",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelPadding: 10
      }],
    };
    $.plot("#graph3", data1, options);
    },

});
}