Question

我有以下示例地图arraylist。首先，我如何使用javascript从纯HTML中访问这个arraylist？其次，我如何迭代这个列表？

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%
JSONObject json = new JSONObject();
JSONArray  list = new JSONArray();
JSONObject course1,course2,course3,course4,course5;

course1 = new JSONObject();
course1.put("code", "ME101");
course1.put("desc", "Marine Engineering 101");
course1.put("sched", "June 1 - August 30, 2014");
course1.put("rsvd", "56");
course1.put("crssched", "cme101s1");
list.add(course1);
course2 = new JSONObject();
course2.put("code", "ME102");
course2.put("desc", "Marine Engineering 102");
course2.put("sched", "September 1 - November 31, 2014");
course2.put("rsvd", "25");
course2.put("crssched", "cme102s1");
list.add(course2);
course3 = new JSONObject();
course3.put("code", "CS101");
course3.put("desc", "Certificate on Seamanship 101");
course3.put("sched", "June 1 - June 30, 2014");
course3.put("rsvd", "36");
course3.put("crssched", "ccs101s1");
list.add(course3);
course4 = new JSONObject();
course4.put("code", "ME201");
course4.put("desc", "Marine Engineering 201");
course4.put("sched", "June 15 - July 16, 2014");
course4.put("rsvd", "65");
course4.put("crssched", "cme201s1");
list.add(course4);
course5 = new JSONObject();
course5.put("code", "ME202");
course5.put("desc", "Marine Engineering 202");
course5.put("sched", "July 1 - August 30, 2014");
course5.put("rsvd", "15");
course5.put("crssched", "cme202s1");
list.add(course5);

json.put("Courses", list);
response.setContentType("application/json");
response.getWriter().write(json.toString());

场景是我在网络服务器中只有html文件，我从另一台服务器上的jsp文件获取数据，我需要使用javascript或jquery在表格中显示html文件。

有什么想法吗？

修改

根据user13500的建议，我查看了JSON并更新了上面的示例数据。测试它在页面上写入，它确实打印出键值对。

我现在如何“公开”json对象并从另一个html页面访问它？

Answer 1

您可能希望查看JSON。

Creating a json object in jsp and using it with JQuery
- （如果你不使用jQuery，请查看JSP部分。）
Returning JSON response from Servlet to Javascript/JSP page

实际上从JSP提供类似的东西（没有格式化）：

...
}, {
  "code"     : "ME201",
  "desc"     : "Marine Engineering 201",
  "sched"    : "June 1 - June 30, 2014",
  "rsvd"     : "65",
  "crssched" : "cme201s1"
} , {
  "code"     : "ME202",
  "desc"     : "Marine Engineering 202",
  "sched"    : "June 1 - June 30, 2014",
  "rsvd"     : "65",
  "crssched" : "cme202s1"
}
...

在Javascript中，您可以执行JSON.parse()并通过迭代等方式访问数组对象。

var i, obj, objArray = JSON.parse(json_from_JSP);

for (i = 0; i < objArray,length; ++i) {
    obj = objArray[i];
    // Here you would have e.g. obj.code === "ME201"
    // or you can access it by obj["code"] 
    // or objArray[i]["code"] etc.
}

在HTML文档中，您可以包含JSON脚本，如果您的目标受众范围很广，可能在浏览器中没有JSON支持，可以直接组建您自己的服务器，也可以通过例如cdnjs链接。（搜索“json” - json2就足够了。）

根据您的评论和更新进行编辑：

从服务器获取数据。您可以通过脚本嵌入将其直接输出到文档中，通常是：

var jsonData = '<%= json.toString() %>';

在这种情况下，由于您希望通过请求在已呈现的页面上获取数据，因此您使用Ajax请求。当你使用jQuery时，一个简单的例子就是：

HTM：

<!DOCTYPE html>
<html>
<head>
<title>JSP Ajax test</title>
<meta charset="UTF-8" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btn_data">Get data</button>
<pre id="dump"></pre>
</body>
</html>

使用Javascript：

// Function to process the data in response
function process_json(jsonString) {
    var i, obj, data = JSON.parse(jsonString);
        dump = $("#dump");

    // If you want to see what the data string looks like
    dump.html(jsonString + "\n");

    // Loop the array and do what you want with each object.
    for (i = 0; i < data.length; ++i) {
        $("#dump").append("CODE: " + data[i].code + "\n");
    }
}

$(document).ready(function () {
    $("#btn_data").click(function () {
        $.ajax({
            type    : "GET",
            url     : "schedules.jsp",
            async   : false,
            success: process_json // Function to process the data
        });
    });
});

更易读的转储：

您可以使用漂亮的打印功能，例如：

function pretty_print(jsonString) {
    var obj = JSON.parse(jsonString),
        str = JSON.stringify(obj, null, "    ");
    $("#dump").html(str + "\n--------------------------\n");
}

查看 ajax 请求。无论是使用jQuery还是纯Javascript。您还可以将其扩展为包含要在服务器上进一步处理的POST和GET数据。通常会针对目标请求过滤掉您想要的内容。

示例输出：

使用上述+ pretty_print()，您的输出应该是：

+------------+
|  Get data  |   <--- button ;-)
+------------+


[
    {
        "code": "ME201",
        "desc": "Marine Engineering 201",
        "sched": "June 1 - June 30, 2014",
        "rsvd": "65",
        "crssched": "cme201s1"
    },
    {
        "code": "ME202",
        "desc": "Marine Engineering 202",
        "sched": "June 1 - June 30, 2014",
        "rsvd": "65",
        "crssched": "cme202s1"
    }
]
--------------------------
CODE: ME201
CODE: ME202

如何在javascript中迭代地图arraylist？

1 个答案:

根据您的评论和更新进行编辑：

HTM：

使用Javascript：

更易读的转储：

示例输出：