在 JSF 中将 JSON 写入 HTTP 响应

Question

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

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

Answer 1

一步一步：

创建一个支持 bean 方法，用于使用数字数组字符串 JSON 表示更新字符串属性 (jsonData)。您将必须：
- 调用 returns 数据的 EJB bean 或 JAX-RS 服务。
- 读取列表中的数据。
- 将 List 集合转换为 JSON 对象，然后将其字符串化，例如使用标准中的 javax.json 包。
- 更新 jsonData 模型属性。
在 JSF 页面中，您必须包含一个绑定到 jsonData 属性的 outputLabel 组件。您可以使用 CSS.
在 JSF 页面中编写 Javascript 代码以将组件值放入 Javascript 变量中。您可以使用 jQuery 选择器或使用 getElementById 函数 Javascript 实现它。
最后你使用了D3库中的Javascript变量

注意：D3库的使用是从here复制过来的。

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>

Answer 2

让 JSF 打印出 JSON 字符串，就好像它是一个 JS 变量一样。

<script>var data = #{bean.json};</script>

在 JSF 中将 JSON 写入 HTTP 响应

Write JSON to HTTP response in JSF

javascript

json

jsf

servlets

httpresponse