如何在不刷新页面的情况下不断更新PHP变量?

我正在建立一个网站,显示Morris图中MySQL数据库的数据。 基本上我有一个数据库,每分钟都有新的测量数据,我试图在不重新加载整个页面的情况下显示这些更改。 我缩短了这个问题的代码,但这基本上就是我所拥有的:

PHP代码:

 

和剧本:

 function data() { var ret = []; ret.push({ y: 'Today', a:  }); return ret; } var graph = Morris.Bar({ element: 'graph', data: data(), xkey: 'y', ykeys: ['a'], labels: ['random label'] }); function update() { graph.setData(data()); } setInterval(update, 60000); 

然后该图显示在id为“graph”的div中。 所以问题是更新function不会使用新数据更新图表,因为$ data不会更新。 我听说我可以以某种方式创建一个PHP函数并使用Ajax继续运行它并让它更新我的$ data变量,但我不知道如何做到这一点。

为了更新图形,我必须重新加载整个页面,这可以使用每隔60秒刷新一次页面的元标记,但这似乎是一个糟糕的解决方案。

我还试图将代码放在一个单独的PHP文件中并使用以下代码运行它:

 var auto_updater = setInterval( (function () { $("#graph").load("data.php"); }), 60000); 

这也很好,但问题是它重绘了整个图形,导致我网站上的滚动条发疯。 我想要的是更新Morris.Bar中的数据变量,而不是整个过程。 任何帮助,将不胜感激。

编辑:因为你只需要一个值,你的json只会是那个值。 虽然从技术上来说,它不能生成有效的json(顶层应该有一个对象)但它可以正常使用jquery。

PHP: (data.php)

  

JS:

 $(document).ready( function () { var data = []; // data is empty var graph = Morris.Bar({ element: 'graph', data: data labels: ['random label'] }); function update () { $.getJSON( "data.php", function (newv) { data.push( { x: newv, y: "Today" } ); // store new value graph.setData( data ); // update the graph }); } update(); setInterval( update, 1000 ); }); 

这就是它的一切!


不可能“让PHP在后台运行”或类似的东西,你的尝试是正确的。 但是,您应该加载纯数据(例如作为JSON文档),然后通过JS将数据推送到现有数据集中,而不是加载新的HTML。 使用JS从服务器获取更新的数据是通过AJAX完成的。

例如,您可以使用$.getJSON

编辑:完整的JS看起来像这样:

 var initial_data =  // or leave this out and replace with another $.getJSON for clean code! $(document).ready( function () { var graph = Morris.Bar( ... ); setInterval( function () { $.getJSON( "data.php", function (data) { graph.setData( data ); }); }, 1000 ); }); 

PHP的响应看起来像这样:

 [ { "x": 10, "y": 20 }, { "x": 3, "y": 12 }, { "x": 8, "y": 19 } ] 

所以PHP看起来像这样:

 [  ] 

尝试将所有PHP放在一个单独的脚本中,让它返回PHP数组中的表(使用json_encode())

这样,您可以使用javascript重绘表格,如下所示:

 var getTableData = function(){ $.getJSON("data.php").done(function(data){ // code to generate html from JSON data $("#graph").html(tableHTML) // puts the html table into the document setTimeout(getTableData, 2000); // interval }); }; setTimeout(getTableData, 0); 

我不确定你的数据是如何格式化的,所以你需要自己创建html!

您将不得不使用某种ajax调用来更新服务器上的值。 此外,在更新值之后,您必须将其保存在某个位置,例如在DB或缓存中,因为当PHP运行结束时,进程将终止,并且您在PHP运行时中创建的所有数据都将丢失