如何在 Javascript 和 JSF 中使用数据库？答案

【问题标题】：How use database in Javascript and JSF?如何在 Javascript 和 JSF 中使用数据库？
【发布时间】：2012-03-05 22:27:06
【问题描述】：

我正在尝试遵循@BalusC 的建议here。（我现在写在这里是因为它与之前的问题无关）。

所以我需要从我的数据库中获取数据并使用 JavaScript this is an example 在图表中显示。我只是在做这个示例，以便了解如何将一些数据从服务器端显示到客户端。

我的豆子：

@ManagedBean(name="reportc")
@ViewScoped
public class ReportControl implements Serializable {
    private static final long serialVersionUID = 3269125738504434502L;

    private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"};

    public String getDataAsJson() {
        Gson gson = new Gson();
        return  gson.toJson(dataAsJson);
    }
}

帮助理解spline-plot-bands.js 文件。

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    ...

    <h:head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>
        <h:outputScript name="javascript/highchart/spline-plot-bands.js" />
    </h:head>
    <h:body>

    <h:outputScript name="javascript/highchart/highcharts.js" />
    <h:outputScript name="javascript/highchart/modules/exporting.js" />

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    </h:body>
</html>

正如您在 spline-plot-bands.js 文件中看到的那样。

对我来说重要的是这部分（我猜）：

series: [{
  name: 'Hestavollane',
  data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
         7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
         8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
         7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
         3.0, 3.0]

  }, {
  name: 'Voll',
  data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
         0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
         0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
         3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
  }]

我怎样才能从我的服务器端向这个 javascript 发送这样的东西？

我想我已经接近了解如何使用 gson、javascript 和 jsf，但我仍然不知道如何完成这个。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript database json jsf gson

【解决方案1】：

JS 需要一个double[]，但你正在喂一个String[]。相应地修复它：

private double[] hestavollane = {
     4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
     7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
     8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
     7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
     3.0, 3.0
};

private double[] voll = {
     0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
     0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
     0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
     3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
};

public String getDataAsJson() {
    Map<String, Object> data = new HashMap<String, Object>();
    data.put("hestavollane", hestavollane);
    data.put("voll", voll);
    return new Gson().toJson(data);
}

并编辑您的 spline-plot-bands.js 文件以使用它而不是硬编码值：

series: [{
    name: 'Hestavollane',
    data: data.hestavollane
}, {
    name: 'Voll',
    data: data.voll
}]

【讨论】：

哇！很棒的 Bauke，谢谢你这么支持我的朋友。有用！谢谢。

【解决方案2】：

您需要的链接文章的关键部分是：

<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>

【讨论】：