将MySQL表值从PHP脚本返回到Javascript函数 - 实时图形

时间:2021-04-25 09:52:12

I have been searching similar problems for hours but with no avail.

我一直在寻找类似的问题几个小时但没有用。

I am using Highcharts to update a graph every 3 seconds with the last entry of a specific MySQL table. I am using the example Javascript code as a guide. Here is the snippet of code I am concerned with

我使用Highcharts每隔3秒用特定MySQL表的最后一个条目更新图形。我使用示例Javascript代码作为指南。这是我关注的代码片段

var chart;
$('#container').highcharts({
  chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function() {
        // set up the updating of the chart every 3 seconds
        var series = this.series[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time - adjust to align with data vals
              y = getyval();
          series.addPoint([x, y], true, true);
        }, 3000);

...where the function getyval() uses $.get():

...函数getyval()使用$ .get():

function getyval(){
  $.get('testget.php', function(output){
    alert(parseFloat(output));
  });
};

My testget.php file:

我的testget.php文件:

<?php
session_start();
$db = $_SESSION['monitorId'];
$table = $_SESSION['tableId'];
$split_table = explode("_", $table);
$param = $split_table[1];

$dbcon = mysqli_connect("localhost","root","",$db);
$query = "SELECT * FROM ".$table." ORDER BY datetime DESC LIMIT 1";
$lastentry = mysqli_query($dbcon, $query) or die('error reading table');
$row = mysqli_fetch_array($lastentry, MYSQLI_ASSOC);
$yval = $row[$param];
echo $yval;    
?>

This works all well and good at "alerting" the last value every 3 seconds but when I try to assign the variable y to this result, it does not work. For example, if I change the getyval() function to:

这很好,并且很好地每隔3秒“警告”最后一个值,但是当我尝试将变量y分配给此结果时,它不起作用。例如,如果我将getyval()函数更改为:

function getyval(){
  $.get('testget.php', function(output){
    return parseFloat(output);
  });
};

Thanks in advance!

提前致谢!

2 个解决方案

#1


0  

If you use just return, it'll return from anonymous function, not from getyval(). Second problem is that getyval() is asynchronous (you'll not receive value just after calling). You have to call that function earlier, save its result somewhere and then use it.

如果你只使用return,它将从匿名函数返回,而不是从getyval()返回。第二个问题是getyval()是异步的(在调用之后你不会收到值)。您必须先调用该函数,将其结果保存在某处然后再使用它。

var yValue = null;
function getyval(){
    $.get('testget.php', function(output){
      yValue = parseFloat(output);
    });
 };

#2


0  

AJAX methods like $.get are asynchronous, meaning the script doesn't wait for them to finish. The function you passed to $.get can return something, but it kind of gets dumped into the bit bucket - there's nowhere useful to return it to.

像$ .get这样的AJAX方法是异步的,这意味着脚本不会等待它们完成。你传递给$ .get的函数可以返回一些东西,但它会被转移到位桶中 - 将它返回给它是没有用的。

Your code needs a little bit of a redesign to take full advantage of being asynchronous. Change the function inside setInterval to this:

您的代码需要进行一些重新设计才能充分利用异步。将setInterval中的函数更改为:

setInterval(function() {
  // current time - adjust to align with data vals
  var x = (new Date()).getTime();
  // we need to do this in here so `function(result)` can use `x`
  $.get('testget.php', function(result) {
  // this gets run when the result is received
    var y = parseFloat(result);
    series.addPoint([x, y], true, true);
  });
}, 3000);

The work is now done when $.get gets its result and invokes its function, which is whenever your PHP runs.

现在,当$ .get获取结果并调用其函数时就完成了工作,这就是PHP运行的时候。

(You might be worried that the async stuff will mean data points might be received out-of-order. That won't happen - you're specifying the x-coordinate manually, and each time the outer function is run a new x is created. Every y will be paired with its matching x.)

(你可能会担心异步的东西会意味着数据点可能无序接收。这不会发生 - 你手动指定x坐标,每次外部函数运行时新的x是每个y都将与其匹配的x配对。)

#1


0  

If you use just return, it'll return from anonymous function, not from getyval(). Second problem is that getyval() is asynchronous (you'll not receive value just after calling). You have to call that function earlier, save its result somewhere and then use it.

如果你只使用return,它将从匿名函数返回,而不是从getyval()返回。第二个问题是getyval()是异步的(在调用之后你不会收到值)。您必须先调用该函数,将其结果保存在某处然后再使用它。

var yValue = null;
function getyval(){
    $.get('testget.php', function(output){
      yValue = parseFloat(output);
    });
 };

#2


0  

AJAX methods like $.get are asynchronous, meaning the script doesn't wait for them to finish. The function you passed to $.get can return something, but it kind of gets dumped into the bit bucket - there's nowhere useful to return it to.

像$ .get这样的AJAX方法是异步的,这意味着脚本不会等待它们完成。你传递给$ .get的函数可以返回一些东西,但它会被转移到位桶中 - 将它返回给它是没有用的。

Your code needs a little bit of a redesign to take full advantage of being asynchronous. Change the function inside setInterval to this:

您的代码需要进行一些重新设计才能充分利用异步。将setInterval中的函数更改为:

setInterval(function() {
  // current time - adjust to align with data vals
  var x = (new Date()).getTime();
  // we need to do this in here so `function(result)` can use `x`
  $.get('testget.php', function(result) {
  // this gets run when the result is received
    var y = parseFloat(result);
    series.addPoint([x, y], true, true);
  });
}, 3000);

The work is now done when $.get gets its result and invokes its function, which is whenever your PHP runs.

现在,当$ .get获取结果并调用其函数时就完成了工作,这就是PHP运行的时候。

(You might be worried that the async stuff will mean data points might be received out-of-order. That won't happen - you're specifying the x-coordinate manually, and each time the outer function is run a new x is created. Every y will be paired with its matching x.)

(你可能会担心异步的东西会意味着数据点可能无序接收。这不会发生 - 你手动指定x坐标,每次外部函数运行时新的x是每个y都将与其匹配的x配对。)