스프링 에서는 REST API를
JS에서는 REST API에 요청을보내는 코드를 작성할것이다.
화면에 버튼생성 > 버튼에 클릭이벤트할당후 클릭시 요청을 보낼수있도록 해보자
$ajax({}) <- 비동기 요청시 사용할 jqery문
ex)
$ajax({
type : "post" <-- 요청방식
url : "http://로컬호스트/컨텍스트패스/요청맵핑경로"
dataType : "json" <-- 보내는쪽에서 어떤 타입으로 받을지 요청하는것이다
contentType : "application/json" <-- 어떤타입으로 보낼것인지 정하는것이다
data : JSON.stringify({"name":"홍길동","age":"20"}) <-- JSON형식의 데이터를 실는과정이다
success : function(data)
{
consoloe.log(data)
}, <-- 요청을 성공할경우 반환값을 data에받는다
error : function(status , error)
{
console.log(status,error);
} <-- 실패시 상태정보와 에러를 반환받는다
})
스프링에서는 해당 데이터를 이렇게 받을수있다
패키지생성 > 클래스생성 클래스전체에 @RestController 생성 <-- 리졸버 뷰를 타지않는다
@CrossOrigin(origins = "*") <-- 다른 서버로부터의 접근을 허용하는 범위설정
@PostMapping(value = "/getAjax" , consumes = "application/json" , produces = "application/json)
<-- 각각의 설정은 mapping경로 / 요청을 어떤값으로 받을지 설정 / 응답을 어떤값으로보낼지 설정
public ArrayList<TestVO> "함수명, 일반적으로 경로와똑같이작성"(RequstBody TestVO vo) <-- vo형식으로 요청값받음
{
ArrayList<TestVO> list = new ArrayList<>();
TestVO t = new TestVO(vo.getName(), vo.getAge(), "2000", 20);
list.add(t);
return list;
} <-- 이렇게하면 위에 js에서 jquery문을이용해 작성한 data를 vo형태로받아 처리한후 Json형태로 리턴해준다
예시로 xml도 해보자면
$.ajax({
type : "post",
url : "http://아이피:포트:컨텍스트경로/맵핑경로",
dataType : "사실생략가능",
contentType : "application/json",
data : JSON,stringify({"name":배찌""age":"40"}),
success : funtion(data)
{
console.log(data)
},
error : function(status,error)
{
console.log(status+error)
}
})
스프링에서는
@CrossOrigin(origins = "*")
@PostMapping(value = "/getXML", consumes "application/json", produces="application/xml")
public ArrayList<TestVO> getoo (@RequestBody TestVO vo)
{
ArrayList<TestVO> list = new ArrayList<TestVO();
TestVO t = new TestVO(vo.getName, vo.getAge, " 10" ,10);
list.add(t);
return list;
}
이렇게 받는다
추가로 return할떄 xml,Json의 형식으로보낼때 객체로만드는 과정이 필요한데 객체로만들기위해서는
jackson-databind와 jackson-dataformat-xml의 라이브러리를 메이븐을통해 주입해줘야한다
==================데이터피커라고 아주유명한 달력라이브러리를 잠깐소개해주었다===========
스크립트 = jquery, 데이터피커
해당사이트 사용문법보면서 사용하라했음
ex$(function()
{
$(달력생성).함수
%(달력생성).함수(날짜형식 포맷)
}
요런식