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

我很难确定将数据从Java支持/托管bean传递到jQuery/Javascript组件（如Highcharts）的最佳方法，以便我的web应用程序以动态、实时的方式生成/显示数据。我在Java方面非常扎实，但我对JavaScript/jQuery的了解非常有限，这显然是我的不足之处。据我所知，最好的方法是在我的web应用程序上对隐藏字段进行轴化，并传递JSON对象或字符串？然后将该值传递到我的JS组件中

首先，这似乎有点耗费人力，因为我需要一个Ajax调用来更新JSON数据，然后是一个setInterval调用来将数据重新读取到JS组件中？我希望我可以直接将数据传递到JS组件中

无论哪种方式，只要有人巩固我的知识，告诉我一个好的尝试和测试的方法，如果不同于上述。。。我们也将非常感谢指南/演示

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

干杯

盟友

更新：

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

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

Highcharts外部JS文件，同样值得注意的是，在开始附加从JSF bean获得的值之前，我在图表底部维护了series函数来构建/填充图形：

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 '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
                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;
            })()
        }]
    });        
}); 

但当我尝试传递我的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以使图表正常工作，但这两种方法都没有成功：

 <h:form>                       
                    <p:commandButton value="update" action="#{testBean.update}" update="beanvalue"/> 

                    <h:outputText value="#{testBean.output}" id="beanvalue"/> <br />
                    <h:outputText value="#{testBean.output}" id="chartValue"/> <br />

                    <p:commandButton value="Load" type="button" onclick="fetchChartData();"/>
                    <p:remoteCommand name="fetchChartData"
                                     action="#{testBean.prepareChartDate()}"
                                     oncomplete="updateChartTest(xhr, status, args);"/>            
                </h:form>

正如我在贝什之前所说的那样，我们非常感谢您的帮助，再多的帮助也会很好

干杯

---

Ally

如果您使用的是PrimeFaces 2.2.1，那么实现您的目标应该非常容易

PF有一个组件

p:remoteCommand

，您可以使用它来Ajaxicaly调用托管bean方法

<h:form id="frmIrsChartData">
    <p:remoteCommand name="fetchChartData"
                     action="#{chartManagedBean.prepareChartData()}"
                     oncomplete="updateChartData(xhr, status, args);"/>
</h:form>

在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

，它使实时图表更容易实现

更新：

你搞错了。在

您需要做的是在DocumentReady上首先呈现图表，然后开始轮询

$(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

函数中，您应该更新您创建的

图表

：

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);
}

注意在

oncomplete=“updateChartTest（xhr，status，args）；”

代码中，回调函数应该是

updateChartTest

而不是

updateChartTest

在图表加载完成后触发ajaxical轮询：

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

仅用于测试，尝试从托管bean返回随机值：

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

---

是的，我正在使用p:poll更新我的web应用程序中的值，我只是不知道如何将其传递到JS函数Highcharts中！我来试试，让你知道！谢谢。你有没有可能展示一下JSON数据的结构或给出一个示例，以及如何将其加载到HighCharts中？我有你在上面写的，但这是我仍在挣扎的高图表加载。。。我不确定这是我想传递的信息还是我想如何加载的信息！好吧，这和你在上面发布的内容差不多，除了我在使用民意测验：。。。我还向脚本中添加了一个警报，因此每隔10秒我就会看到字符串更新。目前，我只是试图传入我的“Y”轴值字符串，将x轴保持为：var x=（new Date（））.getTime（），但正如我所说的，我试图将我的值传递到Highcharts JS文件的方法是完全错误的@Ally:那么您在

fetchChartData（）中正确地接收到JSON了吗？如果是的话，请发布你的JS代码（Highcharts one），而不是在评论中，更新你原来的帖子。我已经添加了Highcharts代码，可以在图表中添加要点！正如我所提到的，我只是试图想象在mo中增加一个数字！
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);
}

<h:form>
    <p:remoteCommand name="fetchChartData"
                     action="#{testBean.prepareChartDate()}"
                     oncomplete="updateChartData(xhr, status, args);"/>
</h:form>

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

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