1. 이클립스 실행
2. dynamicWebProject 생성
3. WebContent 아래 json폴더 생성 후 data.json 파일 생성
4. WebContent 밑에 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Servlet/JSP+JSON연동</title>
</head>
<body>
<a href="data.do?command=list">JSON데이터 리스트 보기</a>
</body>
</html>5. ApiServlet.java 서블릿을 만든다.
@WebServlet("/data.do")
public class ApiServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ApiServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String command = request.getParameter("command");
if(command.equals("list")) {
response.sendRedirect("dataList.jsp");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}5. dataList.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dataList</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/data.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h4 style="text-align: center;padding:50px;">JSON 데이터 리스트</h4>
<table id="member_table" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Tel</th>
<th>Homepage</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>6. WebContent/js/data.js 파일 생성
$(document).ready(function(){
const json="./json/data.json";
$.getJSON(json, function(data){
let member_data="";
$.each(data,function(key,value){
member_data+="<tr>";
member_data+="<td>"+value.id+"</td>";
member_data+="<td>"+value.name+"</td>";
member_data+="<td>"+value.tel+"</td>";
member_data+="<td>"+value.homepage+"</td>";
member_data+="</tr>";
});
$('#member_table').append(member_data);
/*$.each(data,function(key,value){
$('tbody').append(
"<tr>"+
"<td>"+value.id+"</td>"+
"<td>"+value.name+"</td>"+
"<td>"+value.tel+"</td>"+
"<td>"+value.homepage+"</td>"+
"</tr>"
);
});
*/
});
});Jquery를 사용해서 여러 방법으로 tbody아래 부분을 완성시킬 수 있다.
'공공데이터API 활용' 카테고리의 다른 글
| 11. JSON 데이터를 출력시키는 BS 테이블 클래스 연습 (0) | 2022.01.21 |
|---|---|
| 10. Servlet JSP vs JSON 연동하기 - 공공데이터 포털사이트 JSON 연동 (0) | 2022.01.21 |
| 8. JSON 데이터 웹페이지 테이블로 출력하기 (0) | 2022.01.21 |
| 7. 자바(이클립스)에서 공공API 요청 및 출력(2) (0) | 2022.01.21 |
| 7. 자바(이클립스)에서 공공 API요청 및 출력(1) (0) | 2022.01.21 |
