将数据从Java / JSF2 bean传递到Javascript / jQuery组件作为返回值的最佳方法

我无法确定将数据从Java支持/托管bean传递到jQuery / Javascript组件（如Highcharts）的最佳方法，以便我的Web应用程序以动态，实时的方式生成/显示数据。 我在Java方面的表现相当不错，但我对JavaScript / jQuery的了解非常有限，这显然是我倒下的地方。 到目前为止，我已经阅读过，最好的方法是在我的Web应用程序上Ajax化一个隐藏字段并传递一个JSON对象或字符串？ 在它中，然后将该值传递给我的JS组件。

首先，这似乎有点费力，因为我会更新JSON数据进行Ajax调用，然后调用setInterval将数据重新读入JS组件？ 我希望我可以直接将数据传递给JS组件……

无论哪种方式，有人可以坚定我的知识，并告诉我一个良好的尝试和测试方法，如果不同于上面…指南/演示也将受到大力赞赏！

如果这会影响建议的方法，我也使用Primeface的2.2.1？

干杯

盟友

更新：

代码如下，但我只是想描述一下我想要快速实现的目标：实际上我正在尝试使用我的支持bean中的简单count ++函数来实现动态Highcharts图表。 显然，我将使用实时源提供此数据，但目前我只是想根据我的JSF支持bean更改信息来使Highcharts工作。

这是我的简单计数函数和转换为JSON（我不确定JSON方法是否真的有必要，因为只传递了1个值（int），但是我想保留这个方法，因为我相信我会使用更多广泛地在网络应用程序的其他部分）：

public class TestBean { private int output; public TestBean() { output = 1; } public int getOutput() { return output; } public void setOutput(int output) { this.output = output; } public void update() { setOutput(getOutput() + 1); } public void prepareChartDate() { // Produce you JSON string (I use Gson here) RequestContext reqCtx = RequestContext.getCurrentInstance(); reqCtx.addCallbackParam("chartData", new Gson().toJson(output)); } } 

Highcharts外部JS文件，值得注意的是我在图表底部维护了系列函数来构建/填充图形，然后我开始附加从JSF Beans获得的值：

 Highcharts.setOptions({ global: { useUTC: false } }); var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { backgroundColor: "#F8F0DB", renderTo: 'containerHigh', defaultSeriesType: 'area', margin: 10, marginLeft:30, marginBottom:17, zoomType: 'y', events: { load: updateChartData } }, title: { text: 'Feed Flow Rate ' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return ''+ this.series.name +'
'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'
'+ Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: [0, 0, 0, 100], stops: [ [0, Highcharts.getOptions().colors[0]], [1, 'rgba(2,0,0,0)'] ] }, lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false, states: { hover: { lineWidth: 1 } } } }, series: [{ name: 'Random data', data: (function() { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 10000, y: 50 * Math.random() }); } return data; })() }] }); }); 

在我的XHTML页面上保存了内联JS函数：

这有效：

  function updateChartData(xhr, status, args) { var series = this.series[0]; setInterval(function() { var x = (new Date()).getTime() y = 50 * Math.random(); series.addPoint([x, y], true, true); }, 1000) //parse it, process it and load it into the chart } 

但是当我尝试传递我的bean值时：

  function updateChartData(xhr, status, args) { var jsonString = args.chartData var series = this.series[0]; setInterval(function() { var x = (new Date()).getTime() y = jsonString series.addPoint([x, y], true, true); }, 1000) //parse it, process it and load it into the chart } 

那不起作用……

此外，我一直在尝试使用remoteCommand和Poll来使图表工作，我都没有成功：

正如我在Bhesh之前所说的，你的帮助非常受欢迎，而且会更好！

干杯

盟友

Answer 1

如果您使用的是PrimeFaces 2.2.1，那么应该很容易实现您想要做的事情。

PF有一个组件p:remoteCommand ，您可以使用Ajaxicaly调用托管bean方法。

在方法prepareChartData()您生成JSON字符串并使用PF提供的RequestContext将其发送回客户端：

 public void prepareChartDate() { // Produce you JSON string (I use Gson here) RequestContext reqCtx = RequestContext.getCurrentInstance(); reqCtx.addCallbackParam("chartData", jsonString); } 

在Javascript回调函数updateChartData(xhr, status, args)您可以处理JSON响应并加载到图表中：

 function updateChartData(xhr, status, args) { var jsonResponse = args.chartData; //parse it, process it and load it into the chart } 

并且要定期更新图表，只需使用Javascript setInterval或setTimeout并传递remoteCommand的name ，它实际上是一个Javascript函数。

 setInterval("fetchChartData()", 5000); 

我就是这样做的。

PF还有另一个组件p:poll ，可以更容易地实现实时图表。

更新：

你理解错了。 上

您需要做的是先准备文档，然后开始轮询。

 $(document).ready(function() { chart = new Highcharts.Chart({ //.... }); // start your poll here }); 

p:poll回调函数updateChartData(xhr, status, args)需要是全局的，以便poll可以在oncomplete事件上调用它。

 function updateChartData(xhr, status, args) { var jsonResponse = args.chartData; //parse it, process it and load it into the chart //you will load data into the same chart created in document-ready } 

当您使用poll时，您不需要setTimeout或setInterval 。

更新2：

首先，在updateChartData函数中，您应该更新您创建的chart ：

 function updateChartData(xhr, status, args) { var series = chart.series[0]; // <--- no more this instead global variable "chart" var newData = args.chartData; var x = (new Date()).getTime() var y = eval('(' + newData + ')'); series.addPoint([x, y], true, true); } 

接下来， updateChartData是回调函数，所以不要自己调用它，每次请求完成时由remote-command调用它。

并且，给远程命令一个单独的forms：

请注意oncomplete="updateChartTest(xhr, status, args);" 在您的代码中，回调函数应该是updateChartTest而不是updateChartTest 。

加载图表后触发ajaxical轮询：

 events: { load: function() { setInterval("fetchChartData()", 5000); //update the chart every 5 seconds } } 

仅用于测试，尝试从您的managed-bean返回一个随机值：

 public void prepareChartDate() { // Produce you JSON string (I use Gson here) RequestContext reqCtx = RequestContext.getCurrentInstance(); reqCtx.addCallbackParam("chartData", new Random().nextInt(500)); }