ㅇ 어떠한 특정한 파트를 바꾸기 위해 ajax 문법을 활용하는 것을 명확하게 하기
ㅇ 전에 배웠던 get 함수에 대해 정확히 공부하고 , 쓰는 방법에대해 공부하기
ㅇ get 함수, post 함수, ajax함수 의 차이에 대해 공부해보기
* 3개 다 써보고, 프로젝트때 편한걸로 써보기
$.post 함수
1) DAO DTO 만들기
2) 데이터를 넘겨 받을 JSP 단 생성하기
ㅇ html 영역에서 넘겨받은 mid를 getParameter 해주고 DAO를 호출해준다
ㅇ result 값에 dao에 존재하는 아이디 중복체크함수를 넣어준다
ㅇ result 값에는 0(EXIST) 또는 1(NOEXIST) 값이 들어갈 것이며 0 일 경우엔 '중복된 id 입니다' 를 1일땐 '사용가능한 id
입니다를 뿌려줄 수 있도록 세팅한다 => 추후 post 함수를 통해 data를 뿌리면 이 결과값이 나오게 됨
3) 사용자가 사용할 화면단을 구성해준다
ㅇ <span>의 영역은 고객이 아이디가 중복되었을 경우와 사용가능할 경우 그리고 2글자 이상을 입력하지 않았을경우의
경고성 문구가 뜨게 하기 위한 부분이다
ㅇ #result 와 html 태그를 통해 빈 공간에 내용을 집어 넣으면 된다
4) html에 사용자가 쓴 글을 데이터베이스에 넘겨주기 위한 로직을 사용해야 한다
#1. 'button'을 클릭했을시 수행할 로직
ㅇ 우선 html 영역의 input 태그안에 사용자가 넣은 값을 val(); 을 사용하여 변수 mid에 담아준다
ㅇ post는 요청방식에 url에 칠수가 없음 , 따라서 요청경로에 url이 아닌 파일 이름을 쓰고, 요청파라미터, callback 함수
3개를 매개변수로 받아준다
* url(idConfirm.jsp?mid = mid) 이런식으로 쓰면 get 방식이 되어버림
* 요청경로에는 파일 이름까지만 쓰고, 요청 파라미터는 객체의 형태로 써준다 {ㅇ,ㅇ,ㅇ}
* 콜백 함수의 매개변수에는 data(jsp단에서 넘어온 결과값들) , status(결과가 제대로 넘어왔는지 확인하는것) 가 들
어 가게 된다
ㅇ status가 success면 #result에 jsp단에서 넘어온 data결과를 쏙 집어 넣어 주기
#2. keyup 을 사용했을시 수행할 로직
$.ajax 함수
1) DAO DTO 만들기
2) 데이터를 넘겨 받을 JSP 단 생성하기
ㅇ html 영역에서 넘겨받은 mid를 getParameter 해주고 DAO를 호출해준다
ㅇ result 값에 dao에 존재하는 아이디 중복체크함수를 넣어준다
ㅇ result 값에는 0(EXIST) 또는 1(NOEXIST) 값이 들어갈 것이며 0 일 경우엔 '중복된 id 입니다' 를 1일땐 '사용가능한 id
입니다를 뿌려줄 수 있도록 세팅한다 => 추후 post 함수를 통해 data를 뿌리면 이 결과값이 나오게 됨
3) 사용자가 사용할 화면단을 구성해준다
ㅇ <span>의 영역은 고객이 아이디가 중복되었을 경우와 사용가능할 경우 그리고 2글자 이상을 입력하지 않았을경우의
경고성 문구가 뜨게 하기 위한 부분이다
ㅇ #result 와 html 태그를 통해 빈 공간에 내용을 집어 넣으면 된다
4) ajax를 활용하여 html 로직 짜기
#1. 'button'을 클릭했을시 수행할 로직
ㅇ 우선 html 영역의 input 태그안에 사용자가 넣은 값을 val(); 을 사용하여 변수 mid에 담아준다
ㅇ ajax에는 객체 하나를 넣는다, 속성이랑 속성값을 넣어줘야함
* url : 요청경로 ★ (파일명만 쓰면됨)
*data : 요청파라미터이름과 파라미터 값 ★
* type : get방식 / post 방식 (ajax는 get 방식으로 요청할수도 있고, post 방식으로 요청할 수도 있기 때문에 어떤 방식
으로 쓸 건지 type을 정해줘야함) - -안쓰면 디폴트로 get으로 들어감
* dataType : html, jason 등 요청한 경로로 실행한 결과의 타입 -- 안쓰면 디폴트로 html 들어감
* success : 성공적으로 요청한 데이터를 받았을때 수행할 콜백 함수 ★
-- success : funtion(data){$('#result').html(data)} 매개변수에 data 만 써도 됨 왜 ? 지금 status 자체를 속성으로 사
용하고 있으니까
* error : 실패시 수행할 콜백 함수 -- 사용자에게 보여주는게 아니라 개발자용
-- error : function(code) { alert(code.status + code.statusText); 매개변수 안에 data 넣어도 되지만 code를 넣어서
alert창으로 에러 상태와, 에러 메시지 뿌려줄 수도 있음
★ 안쓰면 안되는 아이들
1) ajax함수를 이용해 json 데이터 뿌려보기
#1. dataType을 html이 아닌 제이슨 데이터를 사용했을시 수행할 로직
* json 데이터를 폴더에 옮겨놓고, ajax 함수를 통해 json 데이터 읽어와서 브라우저에 출력하기
*html파일 하나 만들어 놓기 이번 예제에선 json 데이터를 테이블 모양으로 뿌릴 예정
2) 제이슨 데이터를 폴더에 옮겨 놓고, html 하나 생성하기
ㅇtable 생성하고 id 주기 (style도 조정 해주기)
** boder-collapse : collapse 는 가로선이 하나 생기게끔 하는 css
3) ajax 함수 써주기
ㅇ 받아올 data가 없기 때문에 빼기
ㅇ 아래로직을 수행하면 data 변수에다가 객체 배열을 받는 것과 동일함 data = [{name :'키위},{}] 이런식으로..
ㅇ 배열이 들어갔기 때문에 each 함수를 써서 table에 추가해주기 (콜백함수 안에서 해결)
ㅇ each의 첫번째 매개변수에는 data (배열로 들어가게됨) , 콜백함수 (의 매개변수는 idx, items) 여기에 있는 items에 객
체들이 들어간 것 (id,name 이런애들)
'LANGUAGE > JQUERY' 카테고리의 다른 글
| JqGrid 사용법 - ① 환경설정 및 기본세팅 (0) | 2022.11.07 |
|---|---|
| AJAX 와 MVC 패턴 (0) | 2022.06.22 |
| AJAX - 기본 문법 #1 get (0) | 2022.06.21 |
| JQUERY UI (0) | 2022.06.21 |
| JQUERY 기본 STEP (0) | 2022.06.20 |