JSP (26) 썸네일형 리스트형 AJAX (2) - form 데이터를 한번에 옮기기 AJAX(1) 에서는 보내고 싶은 데이터를 [파라미터명: value] 으로 작성하여 하나씩 적었다면 serialize() 를 사용하여 form 태그의 모든 데이터를 넘겨줄 수 있다. test2.jsp 학생 정보 입력 로그인 아이디 패스워드 test2.jsp에서 id와 password를 입력 후 test2_result.jsp로 id값과 password 값을 보내준다! test2_result.jsp AJAX - test2_result.jsp 로그인 성공! 로그인 실패! test2.jsp 에서 받은 id와 password를 가지고 id가 "admin"인지 password는 "1234"인지를 판별후 맞으면 "로그인 성공!" 아니면 "로그인 실패! 출력! 화면이 새로고침 되지 않고 바뀐다는게 신기하기도 하고 생각.. AJAX (1) - 사용법 ▷ AJAX(에이잭스) → Asynchronous Javascript And XML(비동기식 자바스크립트 & XML) → 웹페이지(브라우저)의 갱신 없이 화면 상의 요소를 다룰 수 있는 자바스크립트 라이브러리이자 기술의 이름 → 데이터베이스 등의 작업 요청시에도 요청된 응답이 돌아올 때까지 기다리지 않고 다른 작업을 수행하면서 요청에 대한 응답이 돌아오면 처리가 가능 → 주로, 아이디 또는 패스워드 등의 검증 등에 사용 가능 $.ajax(); test1.jsp // btnOk 버튼에 대한 이벤트 처리 $(function() { $('#btnOk').on('click', function() { $.ajax({ type: "post", // 요청방식(GET or POST) 지정 url: "test1_resu.. JQuery (on 이벤트2) ▷ on('change', 함수) 이벤트 → 특정 대상의 '상태가 변하면' 동작하는 이벤트 jQuery - test9.jsp 전체 VIP 일반 번호 이름 1 홍길동 2 이순신 3 강감찬 이름 아이디 JQuery (on 이벤트) ▷ DOM 객체 탐색 및 접근을 통해 조작하는 방법(이벤트) → on('이벤트명', 함수) 형식을 사용 ▷ on('click', 함수) - 특정 대상을 '클릭' 시 동작하는 이벤트 - 클릭 대상에 제한은 없음(버튼 외에 다른 요소도 가능) - $('선택자').click(함수) 와 동일함 jQuery - test8.jsp 아이디 : 패스워드 : 선택하세요 자바 JSP 스프링 ==== ==== JQuery (sumit() 함수) ▷ submit() 함수 - submit 동작에 대한 이벤트 처리 가능 - 자바스크립트에서 submit 이벤트 처리 방법과 동일함 - form 태그를 대상으로 지정하여 submit() 함수를 호출하고 함수 내에서 submit 버튼 클릭 시 수행할 동작을 지정 jQuery - test7.jsp 아이디 : 패스워드 : 선택하세요 자바 JSP 스프링 JQuery (이벤트3) ▷ 1. eq(인덱스) - 선택자를 포함하여 형제자매 요소 탐색 - 인덱스는 0부터 시작하며, 인덱스에 해당하는 순서에 위치한 요소를 가져옴 - 음수는 뒤에서부터 탐색 2. attr('HTML속성명') - 선택자에서 해당 속성의 값을 가져오거나 추가 - HTML 태그 속성값 자체를 가져오며 상태에 따라 변하지 않음 ex) 체크박스 checked="checked" 속성값을 가져올 때 체크상태가 변해도 checked 임 3. prop('Javascript속성명') - 선택자에서 해당 속성의 값에 대한 상태를 가져오거나 추가 - 값 자체를 다루지 않고 해당 속성의 값에 대한 true/false 리턴 - attr() 함수와 유사하나 HTML 태그의 상태에 따라 결과값이 변함 ex) 체크박스 checked="ch.. JQuery (이벤트2) ▷ 특정 요소에 대한 조작 이벤트 - 2 1. append() - 지정한 내용을 선택자 내부의 '마지막'에 추가 - appendTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').append('추가할내용'); $('추가할내용').appendTo('선택자'); 2. prepend() - 지정한 내용을 선택자 내부의 '처음'에 추가 - prependTo() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').prepend('추가할내용'); $('추가할내용').prependTo('선택자'); 3. after() - 지정한 내용을 선택자 요소 '뒤'에 삽입 - insertAfter() 함수와 문장 구조의 차이를 제외하면 기능은 동일함 - $('선택자').after('.. JQuery (이벤트) ▷ 버튼 등의 특정 대상에 대한 클릭 이벤트(기본) → $('선택자').click(함수(){}); ▷ 특정 요소에 대한 조작 이벤트 1. html() - HTML 문서에서 지정된 범위(선택자)안의 모든 요소를 가져오거나 추가하는 함수 - 요소를 가져올 때 주석까지 포함해서 가져옴 - 단, XML 문서를 대상으로 사용 불가 2. text() - html() 함수와 달리 HTML 문서 및 XML 문서에서도 적용 가능 - 모든 문자열을 가져오거나 추가 가능 - 브라우저마다 줄바꿈이나 공백 등이 달라질 수 있음 3. empty() - 지정된 선택자 내의 하위 요소 제거(비움) 4. remove() - 지정된 선택자 및 선택자 내의 하위 요소 모두 제거 jQuery/test4.jsp 제목1 제목2 제목2-1 제목.. 이전 1 2 3 4 다음
