如何将jsonobject传递给html文件答案

【问题标题】：how to pass a jsonobject to an html file如何将jsonobject传递给html文件
【发布时间】：2015-09-11 09:04:59
【问题描述】：

我正在学习如何在 java 和 html 文件之间进行通信，

我在java中创建了一个小sn-p：

public class OpenInBrowser {
    public static void main(String[] args) {

        JSONObject dataSet = new JSONObject();
        dataSet.put("keyA", "SomeValueA");
        dataSet.put("keyB", "SomeValueB");
        dataSet.put("keyC", "SomeValueC");

        JSONObject someProperty = new JSONObject();
        dataSet.put("someproperty", "aproperty");

        JSONArray properties = new JSONArray();
        properties.add(dataSet);
        properties.add(someProperty);

    }
}

我的 html 文件：

< !DOCTYPE html>
<html lang="en">

<head>


<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
    rel="stylesheet">

<link
    href="http://getbootstrap.com/examples/justified-nav/justified-nav.css"
    rel="stylesheet">

<style>
.axis path {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: Lato;
    font-size: 13px;
}
</style>

</head>

<body>

    <div class="container">

        <div class="jumbotron">

            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = [ {
                        "sale" : "202",
                        "year" : "2000"
                    }, {
                        "sale" : "215",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var data2 = [ {
                        "sale" : "152",
                        "year" : "2000"
                    }, {
                        "sale" : "189",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = {
                        top : 20,
                        right : 20,
                        bottom : 20,
                        left : 50
                    }, xScale = d3.scale.linear().range(
                            [ MARGINS.left, WIDTH - MARGINS.right ]).domain(
                            [ 2000, 2010 ]), yScale = d3.scale.linear().range(
                            [ HEIGHT - MARGINS.top, MARGINS.bottom ]).domain(
                            [ 134, 215 ]), xAxis = d3.svg.axis().scale(xScale), yAxis = d3.svg
                            .axis().scale(yScale).orient("left");

                    vis.append("svg:g").attr("class", "x axis").attr(
                            "transform",
                            "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                            .call(xAxis);
                    vis.append("svg:g").attr("class", "y axis").attr(
                            "transform", "translate(" + (MARGINS.left) + ",0)")
                            .call(yAxis);
                    var lineGen = d3.svg.line().x(function(d) {
                        return xScale(d.year);
                    }).y(function(d) {
                        return yScale(d.sale);
                    }).interpolate("basis");
                    vis.append('svg:path').attr('d', lineGen(data)).attr(
                            'stroke', 'green').attr('stroke-width', 2).attr(
                            'fill', 'none');
                    vis.append('svg:path').attr('d', lineGen(data2)).attr(
                            'stroke', 'blue').attr('stroke-width', 2).attr(
                            'fill', 'none');
                }
                InitChart();
            </script>
        </div>

    </div>

</body>

</html>

具体来说，我想将我在 java 中创建的 json 传递给 html 文件中的 initchart() 函数。

我该怎么做？

提前致谢。

【问题讨论】：

如果你想用 java 开发一些 web 项目，你应该使用 servlet 并使用 request.setAttribute() 和 RequestDispatcher 传递值。并通过 request.getAttribute() 获取 html 页面中的值。

标签： javascript java html json

【解决方案1】：

您需要 Java servlet 而不是 Java 应用程序。

然后您可以在 JSP 页面中创建 UI 并与 JAVA 代码进行通信

或

您可以向 java servelt 发出 ajax 请求并收集 json 数据并将其显示在您的 html 中。

【讨论】：

谢谢解答，不使用服务器可以吗？
不，您不能，您正在尝试与 HTML 页面进行通信。

【解决方案2】：

你的意思是如何从服务器获取 JSON 并以 html 显示信息？然后，首先，您需要从服务器获取 JSON，您可以使用 Jquery.getJSON()：

http://api.jquery.com/jquery.getjson/

在服务器端，您还需要响应此请求并返回 JSON。然后您可以使用 jquery.getJSON() 的成功回调来使用从您的服务器获取的 JSON。

【讨论】：

【解决方案3】：

您正在尝试在 2 个独立的系统之间建立通信。为此，您需要打开一个沟通渠道和一种他们都理解的沟通方式。

由于 html 通常通过 http 通信提供给浏览器，因此最简单的方法是找到可以轻松设置 http 提供数据的东西。 JQuery、使用 servlet 的 Web 服务器……都这样做。

由于您似乎是新手，所以我会选择具有最佳文档、最简单的学习和简单部署的那个。

【讨论】：

【解决方案4】：

重要的是要了解，在 Web 编程中，您不会编写在浏览器中打开页面的主程序。通常，您使用您的 Web 内容启动 Web 服务器，自己打开浏览器并从 localhost（或您的 Web 服务器运行的任何位置）加载正确的位置。

要将您的 JSON 对象传递给您的前端逻辑，您可以使用您选择的技术，例如静态 HTML、Servlet、JSP。

静态 HTML 不涉及 Java。如果您使用 Servlet 或 JSP，则必须以正确的方式（有效的 JavaScript 代码）将 JSON 对象呈现到生成的 HTML 中。

假设您使用 JSP 技术，这将如下所示：

<%!
    public JSONArray getJsonObject() {
        JSONObject dataSet = new JSONObject();
        dataSet.put("keyA", "SomeValueA");
        dataSet.put("keyB", "SomeValueB");
        dataSet.put("keyC", "SomeValueC");

        JSONObject someProperty = new JSONObject();
        dataSet.put("someproperty", "aproperty");

        JSONArray properties = new JSONArray();
        properties.add(dataSet);
        properties.add(someProperty);

        return properties;
    }
%>
<html>
<!-- ... -->
<body>
    <div class="container">
        <div class="jumbotron">
            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = <%=getJsonObject().toString()%>;
                    // ...
                }
                InitChart();
            </script>
        </div>
    </div>
</body>
</html>

这将被放置在您选择的 JSP 容器（例如 Apache Tomcat）的适当位置的 JSP 文件中。请参考例如到Java EE Tutorial了解更多信息。

【讨论】：