我无法确定将数据从 Java 支持/托管 bean 传递到 jQuery/Javascript 组件(例如 Highcharts)的最佳方法，以便我的网络应用程序以动态、实时的方式生成/显示数据。我在 Java 方面非常扎实，但我对 JavaScript/jQuery 的了解非常有限，这显然是我失败的地方。据我所知，最好的方法是在我的网络应用程序上对一个隐藏字段进行 Ajax 化并传递一个 JSON 对象或字符串？进入它，然后将该值传递到我的 JS 组件中。

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

无论哪种方式，如果与上述不同，有人可以巩固我的知识并告诉我一个经过实践检验的好方法...指南/演示也将受到极大的赞赏!!

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

干杯

盟友

更新:

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

这是我的简单计数函数和到 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 '<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;
            })()
        }]
    });        
}); 

以及我的 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 来使图表正常工作，但我都没有成功:

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

正如我在 Bhesh 之前说过的，非常感谢您的帮助，如果再提供帮助就太好了!

干杯

盟友

最佳答案

如果您使用的是 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>

在 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) 需要是全局的，以便轮询可以在 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
}

当您使用轮询时，您不需要 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调用。

并且，给远程命令一个单独的形式:

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

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

关于javascript - 将数据从 Java/JSF2 bean 传递到 Javascript/jQuery 组件作为返回值的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7930047/