아래 샘플 맵 배열 목록이 있습니다. 첫째, 자바 스크립트를 사용하여 순수한 HTML 내부 에서이 배열 목록에 어떻게 액세스합니까? 둘째,이 목록을 어떻게 반복합니까?
<%@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 페이지에서 액세스하려면 어떻게해야합니까?
JSON 을 살펴보고 싶을 것 같습니다 .
실제로 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를 사용할 때 간단한 예는 다음과 같습니다.
<!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>
// 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
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다