08. JsonArray, JsonObject 만들고 불러오기 (AJAX column 사용)

jsonTest.zip

0.02MB

 

백단에서 프론트단으로 데이터를 전송해줄 때 많이 쓰이는 방식이 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를 치면 아래와 같이 나오면 성공.