Egovframework를 이용한 Ajax 통신 에러 (unexpected token ~ in json at position ~ 에러 )

Ajax를 공부하려 Egovframework로 간단히 프로젝트를 하나 생성한 후 Ajax통신을 하는데 404에러가 뜨는 상황이 발생

분명히 해당 URL로 잘 가고 Select문으로 DB에서 데이터들도 잘 가져와지고 있는 상황..

해당 컨트롤러에 @ResponseBody도 적어주어서 자동으로 리턴값이 json형태로 반환되니 당연히 된다고 생각했는데

404에러가 뜨니 어디가 잘못되었는지 몰라 며칠간 헤맸다..

결론은 환경설정은 제대로 하지도 않고 무작정 Ajax통신을 하려 했던 무지했던 상황... 하나하나 정리해보자.

Ajax 통신 테스트를 위해 작성한 Controller Method

우선 위와 같이 Controller Method를 만들어 보았다. 여기서 가장 중요한 것은 리턴값을 자동으로 json 변환해주는 @ResponseBody Annotation이다. 이 Annotaion을 사용하기 싫으면 @Controller대신 @RestController을 사용해도 무방하다.

실제 Ajax 통신 테스트 소스

그 후 .jsp 에서 실제로 Ajax통신을 위한 문을 작성한다. 랜더링이 끝나자 마자 실행되도록  $document.ready로 감싸주었다.

여기서 중요한 것은 dataType : 'json'으로 설정해주었기 때문에 서버에서 반환되는 리턴값은 json이어야 한다.

dataType은 서버에서 반환되는 데이터 타입을 설정해준다.

그리고 contentType은 서버로 보내는 데이터의 타입을 정의해준다 json타입을 서버로 전송해주고 싶으면

캡처와 같이 application/json과 같이 설정해주면 된다.

그럼 우선 이렇게만 설정해주고 Ajax 통신이 되는지 한번 테스트 해보겠다.

성공적으로 URL을 호출하고 map객체에 String이 담긴 모습

상태코드가 200으로 성공적으로 통신성공

성공적으로 URL을 호출하였다. 하지만 다음과 같은 에러가 발생하였다.

syntaxerror unexpected token in json at position 4 에러 발생

 

unexpected token ~ in json at position ~ 에러

 

이제 전자정부에서 Ajax통신을 위한 환경설정을 하나씩 해보겠다.

 

우선 json을 위한 llb를 pom.xml에 추가하도록 한다.

<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>

<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.13</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.9</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.9</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.9</version>
</dependency>

 

를 추가 해준 뒤,

 

dispatcher-servlet.xml에 <bean>을 추가해준다.

 

<bean id="beanNameResolver" class="org.springframework.web.servlet.view.BeanNameViewResolver" p:order="0"/>
<bean id="jsonView" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView">
<property name="contentType" value="application/json;charset=UTF-8"></property>
</bean>

<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="webBindingInitializer">
<bean class="egovframework.example.cmmn.web.EgovBindingInitializer" />
</property>
<property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
</list>
</property>
</bean>

 

이렇게만 추가해주면 전자정부프레임워크에서 다른 mvc등은 다 기본적으로 잡혀 있으므로 Ajax가 정상적으로 기동된다.

성공적으로 통신이 완료되어 msg를 가져온 모습