AJAX로 json데이터 넘겨받기

기상청에서 제공하는 날씨누리서비스를 참고하여, 사용자가 특정 해구를 선택한 후 "검색"버튼 클릭시 해역예보 하단에 작성된 테이블의 내용이 비동기적으로 수정될 수 있도록 하는 작업을 진행해보았다.

 

 

 

비동기 처리를 진행하며 발생한 이슈를 순서대로 정리해보았으며, 목차는 다음과 같이 하였다.

1. ajax로 json데이터 받기
2. ajax 한글 인코딩 이슈 해결
3. 최종 작성된 코드

 

 

---

 

 

 

 

1. ajax로 json데이터 받기

ajax는 학원에서 프로젝트를 진행하며 두어번 해 본 경험이 전부였지만, id중복 확인 기능과 좋아요버튼 기능을 구현하면서 학습한 내용이 있기에 적절히 응용한다면 수월히 진행될 것이라는 판단으로, 위의 검색기능을 비동기 로직이 실행될 수 있도록 작업하였다.

 

검색 이벤트마다 일일예보에 대한 내용을 테이블에 반복적으로 그려야하기 때문에, 예보데이터를 담은 Object객체가 인자로 주어졌을때 해당 내용으로 테이블을 작성하는 함수를 미리 정의해두었다. 때문에 굳이 controller를 통해 Object객체를 반환받기 위해 여러 시도를 진행해보았다. 처음 작성한 코드는 아래와 같았다.

 

 

96번 라인에 작성된 로그를 통해 출력된 콘솔의 내용은 아래와 같이 정상적으로 조회되는 것을 확인 하였다.

 

 

데이터를 정상적으로 반환 받았다면, 브라우저 콘솔에 해당 데이터가 출력될 수 있도록 미리 내용을 작성해두었다.

 

 

 

결과는 실패였다.

요청한 ajax를 통해 사용자의 입력을 가지고 쿼리문도 정상적으로 수행하고 변수에 저장까지 했으면서도, 가장 큰 문제는 front단에서 resultData를 전혀 인식하지 못하고 있었다.

 

 

"좋아요"버튼 구현시에도 같은 이슈가 있었다. int타입을 반환하고 싶었지만 front단에서 해당 변수를 알아보지 못하니, 혹시나 하는 마음에 필요한 변수를 String으로 반환해주니 jsp가 그 변수를 바로 알아봐주더라.

 

같은 맥락으로 JSONObject가 output으로 지정되어있어 못 알아보나 싶었지만, 나는 꼭 테이블 생성하는 함수를 사용하기 위해 예보 데이터가 String이 아닌 Object타입으로 필요했다..

 

혹여 java단에서 반환을 String으로 해서 dataType을 json으로 설정하지 못하게 된다면 또 다른 문제상황이 발생하기에 output을 JSONObject로 고집하였다.

 

 

하지만 ! 몇시간을 고민해보아도 도저히 다른 방법은 생각나지 않았기에ㅠㅠㅠ 아래와 같이 폼을 수정하였다.

 

 

 

결과는 성공 !

java에서 데이터를 문자열로 줬지만, dataType속성을 통해 json으로 받겠다고 명시만 해주었더니, 브라우저 콘솔에서 조회한 resultData는 Object로 잘 인식되어 출력되었다. 앞으로 ajax는 무조건 반환을 String으로 하고, js단에서 dataType이나 형변환을 적절히 사용해다가 필요한 타입으로 바꿔서 사용하면 되겠다 싶었다.

 

 

+) 다른 비동기 로직 사용 사례도 확인해본다면, ajax를 이해함에 있어 좋은 영향이 될 것이라 생각되는 마음에 앞서 언급했던 기능들을 활용한  프로젝트를 첨부하였다. 전체 코드와, 간단한 이미지를 통해 필요한 내용을 확인할 수 있다.

 

 

타투 SNS(좋아요 기능)

https://gregarious-polish-5d0.notion.site/TNI-3cdfedb63abc42569cd65941f9998bf4

TNI

 

 

---

 

도자기 판매 커뮤니티(아이디 중복확인)

https://gregarious-polish-5d0.notion.site/8d92125e7bf643eaba1f4d9032c4674c

필기

 

 

 

 

---

 

 

2. ajax 한글 인코딩 이슈 해결

 

일반적인 경우였다면 위의 목차에서 해결 됐겠지만 ^^

오늘은 또 꽤 새로운 이슈를 맞이하게 되었다. 바로 인코딩 문제..

TM_DAY는 요일 정보를 담고 있어, '???'가 아니라 '수요일'을 반환해주어야함

 

 

 

 

 

 

이 문제를 해결하기 위해 가장 먼저 jsp에 선언된 인코딩 타입을 확인했다. 만일 해당 부분이 누락되었다면 반드시 기재해주어야한다.

 

 

 

두 번째로 JQuery로 ajax할때, contentType속성을 통해 내가 보낼 데이터의 타입과 인코딩에 대한 정보를 명시해주었다.(좌측 사진)

앞선 방법으로 시도했더니 로직이 정상적으로 수행되지 않아 sendData의 type을 확인했는데, String타입이라서 contentType에 대한 내용은 삭제하였다. 

(좌) contentType명시 / (우) 해당 내용 삭제

 

 

마지막으로, java단에서 response인코딩을 설정해주고, produces속성을 설정해준다.

 

 

 

 

다시 브라우저를 실행한 결과 아래처럼 이슈가 개선된 모습을 확인할 수 있었다.

 

 

 

 

 

 

아래의 포스팅을 참고하여 작업했다.

https://despacito-pasito.tistory.com/8

Ajax return받은 한글 데이터 ??로 나오는 현상 해결

 

 

 

---

 

 

3. 최종 작성된 코드

여러 수정을 거쳤기에 본인 소스에 작성된 관련 코드들만 정리해보자면 아래와 같다.

 

js

$.ajax({
	url: "getFctData.do",
	type: "post",
	data: {'check': sendData},
	dataType: "json",//json으로 받겠다.
	success: function(resultData){
		console.log(resultData) //도착 데이터 확인
		$("#daily-result tbody").empty(); //테이블 내용 삭제
		makeTable(resultData.weatherList) //테이블 새용 재작성
	}
});

 

 

java 

String check="";
@RequestMapping(value = "/fs/getFctData.do", produces = "application/text; charset=UTF-8")
@ResponseBody
public String getFctData(@RequestParam(required=false, name="check")String check, HttpServletResponse response) throws Exception {
	JSONObject resultData = catchOfFishService.getWeatherWrn(check);
	response.setCharacterEncoding("UTF-8"); //인코딩 이슈 해결을 위한 설정
	return resultData.toString(); //데이터 정상 송출을 위한 형변환
}

 

 

 

 

---

 

 

 

 

본문의 내용을 읽다가 ajax에서 사용되는 dataType과 contentType이라는 속성들이 무엇을 의미하는지 알고싶다면 아래의 링크를 통해 이해가 가능하다.

https://velog.io/@cksdnr066/Ajax-%EC%9A%94%EC%B2%AD%EC%97%90%EC%84%9C-dataType-%EA%B3%BC-contentType%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B8%EA%B1%B8%EA%B9%8C

Ajax 요청에서 dataType 과 contentType은 뭐가 다른걸까?

 

 

 

 

---