이번엔 Ajax다
Ajax는 비동기 자바스크립트와 XML의 약자이다.
json은 xml과 csv의 단점을 극복한 방식으로 용량이 적고 많이 쓰인다.
문자열은 큰 따옴표를 사용해서 쓰고 key와 value로 구성되어 있다! []를 사용하여 배열형 value도 사용 가능하다.
$.ajax() 함수!!
ajax가 성공했을 때 자동으로 success 이벤트가 발생하고
url => 서버 전송되는 주소
data => 서버로 전송되는 데이터
dataType => 응답결과(json, xml..)
success => 성공 시 호출
error => 에러 발생 시 호출되는 함수
ajax일 때는 핸들러에 @ResponseBody를 붙여 http응답의 메세지 본문으로 전환된다
WHY? 뷰페이지가 아니라는 걸 알려주기 위함!
return 값을 httpservletresponse 응답 메세지로 변환해준다.
실제 코딩할 때 보내고자 하는 url주소를 먼저 찍어보고 잘 나오는 지 확인 후 뷰페이지 실행하자!
json은 res.no 처럼 .으로 변수에 접근 가능하다.
vo와 list를 이용할 땐 뷰페이지에서 jQuery처럼 해주면 되는데,
list는 배열이므로 $.each(res,function(idx,item){}) 으로 불러오고 item.변수명, vo는 res.변수명으로 불러온다.
컨트롤러에서는 기존에 하던대로 작성 후 return 값은 자바객체로 받는다!
왜냐면 ajax는 model 객체로 데이터를 보내지 않고 바로 보내주기 때문이다.
또 ajax로 submit해서 넘길 때는 post방식으로 넘어가지 않도록 event.preventDefault() 로 막아줘야 한다.
data가 여러개일 때는 {} 안에 객체 형태로 보내거나 serializeArray()를 많이 쓴다.
serializeArray() 함수는 입력양식의 문자를 객체로 만들어준다.
하면서 애를 먹었던 게 post 방식으로 insert하는건데도 값을 넣으면 url에 get방식으로 파라미터가 붙었다.
수업시간에 할 때는 전혀 뜨지 않은 거라서 당황했는데 F12로 어디서 에러가 났는지 보니, $ is not defined 로 아예 jQuery가 로드되지 않고 있었다.
간과했던 게, 임포트한 bottom에 js가 들어있어서 작업하던 뷰페이지에는 따로 적어주지 않았는데 ajax 할 때 없어서 에러가 났다. 정확한 이유는 더 알아봐야겠다.
아무튼 우선 등록하면 DB로 잘 넘어가서 한시름 놓고 이렇게 정리를 해본다.
늘 말하지만 힘내자!
