ㅇ AJAX 기본 문법에 대해 익히고 get, post, ajax 의 사용법에 대해 익히기
기본문법
ㅇ ajax 의 기본 함수들 get , post, ajax
[사용 방법 ]
ㅇ $.get(URL, callback);
ㅇ $.post(URL, {파라미터이름:전달파라미터값, callback);
ㅇ $.ajax({/* $.ajax(json형식으로 option 설정)
ex) $.ajax({url:'', type:'get', data:~ , success:function(data,status){} });
1. url : 요청 자원(서버)를 호출, 일반적으로 호출된 자원에서 json형식으로 데이터 return 해준다
2. type : 요청처리방식
3. data: 요청시, 함께 전달되는 데이터
ex. $(‘form’).serialize()
form안에 있는 데이터를 query로 변경하여 전달
4. dataType : 요청 후, 응답의 결과로 반환되는 데이터의 종류를 선언
ex. Xml, html, joson, text
5. success : 성공했을 때, 처리할 내용, 콜백함수로 나타냄.
ex. Function(data, status){}
6. error : 응답이 에러가 났을 때, 에러 상태에 대한 코드를 반환
ex. error : function(code){
code:에러에 대한 code 내용 전달...
}
*/})
ㅇ 아이디를 입력하고 중복체크 버튼을 눌렀을때 <spa>에 묶여 있는 영역의 단에, 로그인 중복체크 결과가 뜨기를 바람
ㅇ 이를 ajax 문법이라고 함
$.get 함수
* 이번 예시에서 get을 이해하기 위해선 데이터 베이스에 등록된 내용들이 어느정도 필요하다 따라서 내가 생성해놓은 DAO와 DTO가 있다면 src 폴더에 이 두개를 먼저 세팅 해주도록 하자
* DAO와 DTO를 다 만들었다면 우리에게 필요한것은 get 함수를 사용할 html 파일과 , 데이터를 넘겨받을 jsp 단이다
1) DAO DTO 만들기
2) 데이터를 넘겨 받을 JSP 단 생성하기
ㅇ html 영역에서 넘겨받은 mid를 getParameter 해주고 DAO를 호출해준다
ㅇ result 값에 dao에 존재하는 아이디 중복체크함수를 넣어준다
ㅇ result 값에는 0(EXIST) 또는 1(NOEXIST) 값이 들어갈 것이며 0 일 경우엔 '중복된 id 입니다' 를 1일땐 '사용가능한 id
입니다를 뿌려줄 수 있도록 세팅한다 => 추후 get 함수를 통해 data를 뿌리면 이 결과값이 나오게 됨
3) 사용자가 사용할 화면단을 구성해준다
ㅇ <span>의 영역은 고객이 아이디가 중복되었을 경우와 사용가능할 경우 그리고 2글자 이상을 입력하지 않았을경우의
경고성 문구가 뜨게 하기 위한 부분이다
ㅇ #result 와 html 태그를 통해 빈 공간에 내용을 집어 넣으면 된다
4) html에 사용자가 쓴 글을 데이터베이스에 넘겨주기 위한 로직을 사용해야 한다
#1. 'button'을 클릭했을시 수행할 로직
ㅇ 우선 html 영역의 input 태그안에 사용자가 넣은 값을 val(); 을 사용하여 변수 mid에 담아준다
ㅇ get함수를 사용하되, 내가 어떤 곳의 데이터를 가지고 올지에 대한 url 을 써주고, 콜백함수를 담아준다
ㅇ 우리는 html 영역의 mid가 파라미터로 넘어간 idConfirm.jsp 단의 수행결과에서 data를 가지고 올 것이며 거기서 온
data와 정보들이 잘 넘어왔는지에 대한 성공유무인 status를 콜백함수의 매개변수로 써준다
ㅇ if문을 활용해, 정보들이 잘 넘어왔다면 수행결과가 담김 data를 #result에 html태그를 활용해 뿌려준다 (중복된 아이
디 입니다 or 사용가능한 아이디입니다)
#2 keyup 함수를 활용하여 화면 아래단에 바로 뿌릴 수 있도록 하기
ㅇ #mid(html 영역에 있는 사용자가 사용할 아이디 입력창) 에 keyup 이벤트를 건다
ㅇ #mid에 사용자가 입력한 value 값을 변수 mid 에 담아주고 그 담아준 값이 2글자 이하일 경우엔 #result 단에 html 태
그를 활용하여 'id'는 2글자 이상입니다 라는 글 뿌려주기
ㅇ 만약 아이디가 2글자 이상일 경우엔 중복체크 로직을 실행해야 하기 때문에 위에서 했듯 get 함수를 활용하여
idConfirm.jsp 에 있는 데이터 내용들을 불러와 뿌려주기
'LANGUAGE > JQUERY' 카테고리의 다른 글
| JqGrid 사용법 - ① 환경설정 및 기본세팅 (0) | 2022.11.07 |
|---|---|
| AJAX 와 MVC 패턴 (0) | 2022.06.22 |
| AJAX - 기본 문법 #2 post & ajax (0) | 2022.06.22 |
| JQUERY UI (0) | 2022.06.21 |
| JQUERY 기본 STEP (0) | 2022.06.20 |