백단에서 프론트단으로 데이터를 전송해줄 때 많이 쓰이는 방식이 AJAX이다.
온라인상에 이미 API가 존재한다면 js에서 바로 $.ajax를 이용하거나 httpRequest를 이용해서 받아오면 되지만
API가 없다면 백단에서 직접 뿌려줘야 한다.
그 방식을 나열해보면 아래와 같다.
1. Json 라이브러리를 이용하여 데이터값을 만들거나, 다른 페이지의 데이터를 가져와 Json형태로 만들어준다.
2. @RequestMapping과 @ResponseBody로 원하는 데이터를 Return 시켜준다.
3. 자바스크립트 ajax로 값을 받아온다.
4. 받아온 값을 html로 띄워 보여준다.
특히, 여기서는 우리가 잘아는 아래 처럼 $.ajax명령어가 아닌 jQuery의 DataTable()을 사용하여 데이터를 테이블형태로 바로 받아오겠다.
<script>
$(function(){
$.ajax({
url:'./time.php',
success:function(data){
$('#time').append(data);
}
})
})
</script>
1. @ResponseBody 작성
단순하게 {}를 만들어서 저장하는 방법도 있겠지만 명령어를 통해서 아래의 데이터를 작성해보겠다.
여기서는 Json 라이브러리만 제대로 알면 90%는 끝이다.
{"data":[{"extn":0,"name":0,"position":0,"office":0,"salary":0,"start_date":0},{"extn":1,"name":1,"position":1,"office":1,"salary":1,"start_date":1},{"extn":2,"name":2,"position":2,"office":2,"salary":2,"start_date":2},{"extn":3,"name":3,"position":3,"office":3,"salary":3,"start_date":3},{"extn":4,"name":4,"position":4,"office":4,"salary":4,"start_date":4},{"extn":5,"name":5,"position":5,"office":5,"salary":5,"start_date":5}]}
※ Json 파일 작성
1) Gson 메이븐 저장
pom.xml에 아래와 같이 의존성 주입
<!--Gson과 Json-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20171018</version>
</dependency>
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.5</version>
</dependency>참고로 JSONObject 처럼 대문자 JSON은 Json.org에서 제공하는 라이브러리고 JsonObject처럼 소문자 Json은 구글에서 제공하는 Gson이다.
보통 Gson을 많이 쓴다.
2) Json 형태 만들기
위의 데이터 형태를 보면 맨 바깥쪽에 {}로 중괄호가 있고 그안에 data:[{배열1},{배열2},{배열3}] 가 있는 형태이다.
즉, 맨 상위의 형태는 data와 array로 나눠진다.
따라서 맨위의 json object인 obj1에는 data와 array가 가게끔한다.
그 뒤 obj2로 데이터1, 데이터2, 데이터3을 만들어서 이것을 통틀어 jsonArray로 묶어서 맨위의 json object인 obj1에 저장해줄 것이다.
아래 코드에 주석으로 설명 써놓았다.
Gson 사용
@RequestMapping(value = "/aa", method = RequestMethod.GET)
@ResponseBody
public String home3() {
//상위 오브젝트 생성
JsonObject obj1 = new JsonObject();
//data: 뒤에 들어갈 값인 jArray 생성
JsonArray jArray = new JsonArray();
//배열생성, jArray의 0번째 배열에 쭈루룩, 1번째 배열에 쭈루룩~
for(int i=0; i<6; i++){
JsonObject obj2 = new JsonObject();
//obj2는 반드시 for문 안에 놓아야 한다. 그래야 중복이 안생긴다.
obj2.addProperty("name",i);
obj2.addProperty("position",i);
obj2.addProperty("salary",i);
obj2.addProperty("start_date",i);
obj2.addProperty("office",i);
obj2.addProperty("extn",i);
jArray.add(obj2);
}
//마지막으로 최상위의 jsonObject에 data와 jArry를 넣어준다.
obj1.add("data", jArray);
String resp = obj1.toString();
return resp;
}
Json.org는 add를 put으로만 바꾸어주면 된다. 둘중 무엇을 쓰던 상관 없다.
Json.org 사용
@RequestMapping(value = "/bb", method = RequestMethod.GET)
@ResponseBody
public String home5() {
//상위 오브젝트 생성
JSONObject obj1 = new JSONObject();
//data: 뒤에 들어갈 값인 jArray 생성
JSONArray jArray = new JSONArray();
//배열생성, jArray의 0번째 배열에 쭈루룩, 1번째 배열에 쭈루룩~
for(int i=0; i<6; i++){
JSONObject obj2 = new JSONObject();
//obj2는 반드시 for문 안에 놓아야 한다. 그래야 중복이 안생긴다.
obj2.put("name",i);
obj2.put("position",i);
obj2.put("salary",i);
obj2.put("start_date",i);
obj2.put("office",i);
obj2.put("extn",i);
jArray.put(obj2);
}
//마지막으로 최상위의 jsonObject에 data와 jArry를 넣어준다.
obj1.put("data", jArray);
String resp = obj1.toString();
return resp;
}데이터가 없어서 밸류값을 i로 해놨지만 저 for문 안에서 얼마든지 다른 곳의 데이터를 가져와서 저장할 수 있다.
이때 get(i) 메소드가 많이 쓰인다.
이렇게 리턴을 해주고 주소창에 localhost:8080/aa 라고 치면 아래와 같이 나오면 성공이다.
2. JSP와 스크립트 작성
스크립트로 /aa주소에서 데이터를 받아와서 JSP에 띄워준다.
스크립트는 아래에 위치하는 것이 좋다.
테이블 id는 example로 해두고 jquery에서 $('#example').DataTable({ })를 사용해서 데이터를 쭈루룩 입력해준다.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<meta charset="utf-8">
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "/aa",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</body>
</html>
주소창에 localhosot를 치면 아래와 같이 나오면 성공.
'스프링 프레임워크 > 스프링 기초' 카테고리의 다른 글
| 10. db 시간 timestamp error (0) | 2020.03.26 |
|---|---|
| 09. 스프링에서 myBatis사용하여 mySQL db연동 (0) | 2019.06.24 |
| 07. Json 파싱(parsing) (0) | 2019.06.11 |
| 06. Mybatis란? (0) | 2019.04.22 |
| 05. 자주 쓰이는 스프링 라이브러리 및 유틸 (0) | 2019.04.22 |