[SpringBoot] 스프링부트 Ajax를 이용한 비동기 통신

Mybatis 연동하여 데이터를 처리하는 방법은 이전 포스팅을 참조해주세요.

1. **Controller.java 생성 및 코드 작성

package com.example.demo;

import java.util.HashMap;
import java.util.List;
import java.util.Map.Entry;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.service.TestService;

@Controller
public class TestController {
    @Autowired
    private TestService service;
	
    @RequestMapping(value="/", produces = "application/text; charset=utf8")
    public String main() {
        return "index";
    }
    
    @PostMapping(value="/selectAll")
    @ResponseBody
    public String selectAll(@RequestBody String info) {
    	String json = null;
        
    	try {
    	    Gson gson = new Gson();
            Map<Object, Object> map = new HashMap<Object, Object>();
            map = (Map<Object, Object>) gson.fromJson(info, map.getClass());

            System.out.println("info : " + gson.toJson(map));
            // -> info : {"gender":"m","region":"서울"}
            List<HashMap<Object, Object>> selectList = service.selectAll((HashMap<Object, Object>)map);
            
            json = gson.toJson(selectList);
    		
    	} catch (Exception e) {
    		e.printStackTrace();
    	}
    	
    	return json;
    }
}

 

@ResponseBody 어노테이션을 반드시 붙여줍니다.

 

파라미터 String info는 json형태의 스트링입니다.

 

스트링 info를 Gson fromJson()을 이용하여 Map을 만들고 서비스 메소드를 이용하여 쿼리 결과를 가져옵니다.

 

쿼리 결과(HashMap을 원소로 갖는 List = List<HashMap<Object, Object>> selectList)를

 

Gson toJson()을 이용하여 json형태의 스트링으로 다시 변환합니다.

 

그리고 이것을 리턴합니다.

 

Gson을 사용하기 위해 pom.xml의 dependencies 요소안에 다음을 추가합니다.

<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
	<version>2.8.5</version>
</dependency>

 

2. Ajax 호출 JavaScript 작성

$(document).ready(function() {
    var gender = "m";
    var region = "서울";
    
    var inputData = {"gender":gender, "region":region};
    
    $.ajax({
	    url: "/selectAll",
	    type: "post",
	    data: JSON.stringify(inputData),
	    dataType: "json",
	    contentType:"application/json;charset=UTF-8",
	    async: false,
	    success: function(data){
	        if (data.length == 0) {
	    	    alert('조회 결과가 없습니다.');
	        }
	        else {
           	    console.log(data);
               
	    	    for(var i=0; i<data.length;i++) {
		    	var id = data[i]['id'];
		       	var name = data[i]['name'];
                        var gender = data[i]['gender'];
                        var region = data[i]['region'];
                        
                        console.log('id:' + id);
                        console.log('name:' + name);
                        console.log('gender:' + gender);
                        console.log('region:' + region);
		    } 
	        }
	    },
	    error: function(xhr, status, error){
	       alert(xhr.responseText);
	    },
	    complete: function(xhr, status){}
    });
});

 

위의 코드는 DOM이 모두 로드 되었을 때 실행되는 스크립트 코드로, 버튼 등의 이벤트나 특정 동작으로 Ajax 통신을 하고 싶다면

 

$(document).ready() 부분을 사용자 지정 함수 또는 이벤트로 만들면 됩니다.

 

데이터를 Map 형태로 만들고, JSON.stringify()를 이용하여 JSON 형태의 스트링과 함께 서버에 Request 합니다.

 

서버로부터 받은 Response 데이터는 2차원 배열을 처리하는 것처럼, data[i]['칼럼명'] 형식으로 사용합니다.

 

Response 데이터(data)의 console.log() 값은 아래와 같습니다. (name 값은 가상의 이름입니다.)

 

 

위와 같이 가져온 데이터를 jQuery를 이용하여 DOM의 내용을 동적으로 변경해주면 됩니다.