Javascript 在JSF中将JSON写入HTTP响应_Javascript_Json_Jsf_Servlets_Httpresponse

Javascript 在JSF中将JSON写入HTTP响应

javascript json jsf servlets

Javascript 在JSF中将JSON写入HTTP响应,javascript,json,jsf,servlets,httpresponse,Javascript,Json,Jsf,Servlets,Httpresponse,我想用JSF中的de JavaScript库D3.js动态创建图表。我的意思是，java方法从数据库中获取数据并写入相应的JSON。这个方法我已经编好程序了，而且很有效。然后JavaScript应该访问JSON并创建图表我的问题是：如何将JSON文件传递给JavaScript。我认为最好的方法是在HTTP响应中编写它。但是在JSF中如何做到这一点呢？或者您还有其他建议吗？逐步：创建一个支持bean方法，用数字数组字符串JSON表示更新字符串属性jsonData。你必须：调用返回数据的EJB

我想用JSF中的de JavaScript库D3.js动态创建图表。我的意思是，java方法从数据库中获取数据并写入相应的JSON。这个方法我已经编好程序了，而且很有效。然后JavaScript应该访问JSON并创建图表

我的问题是：如何将JSON文件传递给JavaScript。我认为最好的方法是在HTTP响应中编写它。但是在JSF中如何做到这一点呢？或者您还有其他建议吗？

逐步：

创建一个支持bean方法，用数字数组字符串JSON表示更新字符串属性jsonData。你必须：

调用返回数据的EJB bean或JAX-RS服务。读取列表中的数据。将列表集合转换为JSON对象，然后将其字符串化，例如使用标准中的javax.JSON包。更新jsonData模型属性。在JSF页面中，必须包含绑定到jsonData属性的outputLabel组件。你可以用CSS隐藏它

在JSF页面中，编写Javascript代码，将组件值放入Javascript变量中。您可以使用jQuery选择器或使用带有getElementById函数的纯Javascript实现它

最后，使用D3库中的Javascript变量

注：D3库的使用已从中复制

JSF页面中的代码与此类似：

<h:form id="myForm">
    <h:outputLabel id="myLink" value="#{yourBackingBean.jsonData}"  
        style="display:none;" styleClass="myLink"/>

    <div class="someclass">
        <h2>Create A Bar Chart With D3 JavaScript</h2>
        <div id="bar-chart">

        </div>
    </div>  

    <script>

        var chartdata = eval(document.getElementById("myForm:myLink").innerHTML);
        // you can use jQuery too: $(".myLink").html()

        //  the size of the overall svg element
        var height = 200,
            width = 720,

        //  the width of each bar and the offset between each bar
            barWidth = 40,
            barOffset = 20;


        d3.select('#bar-chart').append('svg')
          .attr('width', width)
          .attr('height', height)
          .style('background', '#dff0d8')
          .selectAll('rect').data(chartdata)
          .enter().append('rect')
            .style({'fill': '#3c763d', 'stroke': '#d6e9c6', 'stroke-width': '5'})
            .attr('width', barWidth)
            .attr('height', function (data) {
                return data;
            })
            .attr('x', function (data, i) {
                return i * (barWidth + barOffset);
            })
            .attr('y', function (data) {
                return height - data;
            });     
    </script>
</h:form>

逐步：