jsp json 데이터 받기

JAVA
2018. 9. 20. 14:51

$.each(data, function(key,value) 이용하여 데이터 받기

비동기 방식으로 동작하기 위해 ajax를 사용하게 됩니다. 저는 레이어팝업에서 데이터를 가져오기 위하여 사용하였습니다. 레이어팝업은 한페이지 안에서 동작이 이뤄져야 하기 때문에 ajax 통신이 필요합니다. 장점은 비동기로 작동하기 때문에 해당기능이 데이터를 처리하는 동안에 또 다른 동작을 수행할수 있고, 불필요한 화면 로딩을 줄이고, 조금더 자유롭게 보이는 페이지 구현을 가능하게 해줍니다.

Jquery each 의 표현식

JSP 에서 $.each(data, function(key,value) 으로 데이터를 가져오고 function 기능을 통해 key 와 value 를 구분하여 가져올수 있습니다. 이렇게 가져온 키와 값은 물론 jquery 의 append 를 통하여 자바스크립트에서 값을 추가해줘야 됩니다. 소스를 통하여 이해를 하시면 조금더 쉽게 이해가 되리라고 생각 됩니다. 소스를 보시죠.

Controller Java 부분

import org.json.simple.JSONObject;

@SuppressWarnings("unchecked")
@RequestMapping(value = "/json.do", method = {RequestMethod.POST, RequestMethod.GET})
 public  @ResponseBody Object detailInfo(
			@RequestParam(value="contract_id", required=false)String contract_id,			   
			HttpSession session,
			HttpServletRequest req,
			HttpServletResponse res)
{
			JSONObject json = new JSONObject();
			ContractBean command = null;
			List logList = null;
	try{
			command = contractDao.selectContractInfo(contract_id); // 계약상세정보 
			logList = contractDao.selectLogInfoList(contract_id);//계약상세로그
			
			json.put("command", command);
			json.put("logList", logList);
	}catch(Exception e){
		e.printStackTrace();
	}
	return json;
}

저는 다음과 같이 DB에서 두가지 정보를 조회하여 JSONobject 객체와 VO 를 생성하여 리스트와 VO 두가지에 값을 담아서 json.put 을 이용하여 각 command 와 logList 라는 key에 담았습니다. 이제 jsp 페이지에서 ajax를 이용하여 /json.do 를 호출하여 값을 가져오면 되겠죠.

JSP 페이지 자바스크립트 부분

function fn_popup(contract_id) {
	$.ajax({
		url : "/json.do",
		type : "POST",
		dataType : "json",
		data : "contract_id=" + contract_id,
		success : function(data) {
			$.each(data, function(key, value) { //  { logList:[{}], command:{} } 이런구조임
				if (key == "logList") {
					for (var i = 0; i < value.length; i++) {
						alert(value[i].access_ip);
					}
				} else if (key == "command") {
					$('#doc_nm').append(value.doc_nm);
					$('#contract_id').append(
							value.contract_id);
				}
			});
		},
		error : function(msg) {
			alert("error" + msg);
		}
	});
}

버튼을 클릭하여 fn_popup 을 실행 하면 contract_id 값을 다음과 같이 ajax 통신을 수행하면서 /json.do 에게 넘기고 호출하게 됩니다. 성공적으로 받아오면 success 구문을 실행하게 되고, json 형식으로 가져온 데이터는 다음과 같이 if문을 통하여 key값을 구분하여 각각의 로직을 수행하게 됩니다. 리스트는 for문을 통하여 value 값 길이만큼 돌면서 모든값을 출력하게 됩니다. else if 구문을 보면 실제로 div 값에 doc_nm 처럼 아이디를 추가하여 div 를 통하여 값을 출력하게 됩니다. 그러면 실제 jsp 페이지에서도 값을 볼수가 있는거죠. 하다가 모르시거나 이의제기 있으시면 언제든 댓글 환영입니다.