Web/Spring framework
Spring) ajax _1(MappingJackson2JsonView 사용)
surhommejk
2018. 5. 11. 11:03
1. pom.xml 에서 jackson dependency 선언
(비동기로 json타입의 데이터를 가져올 것이기 때문에)
<!-- jackson lib -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.7.3</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.3</version>
</dependency>
2. 나중에 Controller에서 @Autowired로 bean을 찾아 쓸 수 있도록 DispatcherServlet에org.springframework.web.servlet.view.json.MappingJackson2JsonView을 bean 설정
<bean class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
3. 컨트롤러에서 아래와 같이 처리
(핵심: jsonview를 @Autowired 해주고 메소드에서 return 해주면 바로 클라이언트로 간다)
@Controller
public class AjaxController {
// org.springframework.web.servlet.view.json.MappingJackson2JsonView
// @Autowired에 의해 자동으로 정의된 bean에서 찾아준다
@Autowired
private View jsonview;
@RequestMapping(value="json.kosta")
// 데이터를 담기 위해서 ModelMap 선언
public View jsonkosta(String command , String name, String[] arr , ModelMap map){
// 배열로 보냈기 때문에
// String[] 으로 받았음을 숙지
// ajax로 보내는 데이터의 key값과
// 메소드의 파라미터 명이 일치하기 때문에
// 잘 들어온 것을 확인할 수 있다
System.out.println("command : " + command);
System.out.println("name : " + name);
System.out.println("arr : " + arr);
System.out.println(Arrays.toString(arr));
ArrayList<String> list = new ArrayList<>();
list.add("치킨맥주");
list.add("돈까스");
list.add("치킨피자");
// 여기서 MedelMap에 데이터를 담는다
// 이때 실린 데이터가 클라이언트로 넘어가게 된다
map.addAttribute("menu", list);
// 이렇게 View 타입을 리턴하고 위에서 @Autowired로 선언해준
// jsonview를 리턴하면 리졸버를 거치지 않고 바로 클라이언트로 감
return jsonview;
}
}
4. 비동기 요청하고 원하는 식으로 데이터를 뿌려준다
$(document).ready(function(){
$('#ajaxBtn').click(function(){
var array = new Array();
array[0] = "a";
array[1] = "b";
$.ajax(
{
type : "post",
url : "json.kosta",
// 아래와 같이 주소에 달아서 보내도 된다
// 이렇게 보내면 받는 컨트롤러의 메소드에서
// 파라미터의 변수명을 일치시켜줘야 들어간다
// cf) 배열은 String[] arr 처럼 타입을 배열로 받아야 한다
data : "command=AjaxTest&name=java&arr="+array,
success : function(data){
console.log(data);
$('#menuView').empty();
var opr="";
$.each(data.menu,function(index,value){
console.log(index + "/" + value);
opr += index + "." + value + "<br>";
});
$('#menuView').append(opr);
}
}
)
});