@ResponseBody로 ajax에 String형으로 보내서 활용하기(json사용) 1

@ResponseBody 사용하면 보통 List배열 형태로는 ajax에서 못 받는 것 같고

배열형태를 String으로 보내서 ajax에서 받고, ajax에서 json으로 변환해서 사용해야 하면 된다.

 

@ResponseBody
@RequestMapping(value = "/findAvailableTimes.do", method = RequestMethod.GET)
public String findAvailableTimes(Model model, @ModelAttribute PassportInfoVO passportInfoVO) throws Exception {
    List<PassportInfoVO> list = passportService.findAvailableTimes(passportInfoVO);
    JSONArray result = JSONArray.fromObject(list);

    return result.toString();
}

-> 컨트롤러에서 배열형태로 받은 데이터를 json으로 String형으로 보내기!

 

 

function getAvailableTimes(reservDate) {
	var data ={
			reservDate: reservDate 
	}
	$.ajax({
        type: "GET", 
        url: "${pageContext.request.contextPath}/dpt/dpt06/findAvailableTimes.do",
        data: data,
        success: function(response) {
        	console.log("response : " + response);
            
        	var displayArea = document.getElementById('time_select');
            var timeSelector = document.createElement('ul');
            displayArea.innerHTML = '';

            var itemList = JSON.parse(response);  //이렇게 사용하면 된다!그럼 json형식으로 변환됨.
            
            itemList.forEach(item => {    
                var time = item.reservTime; //그럼 이런식으로 변수를 빼서 사용할 수 있다.
                var yn = item.reservYn; 
                var listItem = document.createElement('li');
                var radioInput = document.createElement('input');
                radioInput.type = 'radio';
                radioInput.name = 'schdulTmeNos';
                radioInput.id = 'time_' + time.replace(/:/g, '');
                radioInput.value = time;

                var label = document.createElement('label');
                label.setAttribute('for', radioInput.id);
                label.textContent = time;

                listItem.appendChild(radioInput);
                listItem.appendChild(label);
                timeSelector.appendChild(listItem);
            });

            displayArea.appendChild(timeSelector);
        },
        error: function(error) {
            console.error('error : ', error);
        }
    });
}

 

 

String 보내진 데이터

-> 컨트롤러에서 배열을 String형으로 보냈기 때문에 response에서 문자열로 쭉 나열된다.(문자열로 나열 된 데이터는 사용할 수 없음.)

 

 

String을 배열로 변환한 모습

-> 그래서 response를 JSON.parse(response) 이렇게 JSON형태로 변환시켜준다.

 

 

이런식으로 데이터 값을 추출할 수 있다.

-> 그리고 변환된 데이터를 반복문을 통해서든지 등등 사용해줄 수 있다.