0629 67일차)Jquery & AJAX②

1.회원 가입 폼(기본)

-아이디,비번 입력 확인

-아이디,비번 미입력시 제출 안되게 : return true

 

 

2.같은 예제-제이쿼리 이용해서 아이디,비번 입력 확인하기

 

<span></span>을 두어 alert 대신 글자 안내로

실행시 화면↓

 

 

3.preventDefault / Serialize

-preventDefault : 주로 a태그가 눌러도 hfer링크로 이동하지 않게 하거나 form안에서 submit 역할의 버튼을 눌렀을 때 submit은 작동하나 페이지가 넘어가는 동작을 막게 하고 싶을 때 

-Serialize : 전송되는 파라미터 값들을 쿼리스트링 문자열로 만들어줌 let param="id="+id+"&pwd="+pwd;

 

preventDefault

위처럼 진행시 아래처럼 submit 진행은 되지만 페이지가 넘어가지 않은 상태로 존재,

console창에 serialize된 param값 존재

 

4.

Mission

---

1.아이디 / 비번 입력 확인 

2.아이디는 5~8 입력되게

3.비밀번호와 비밀번호 확인란이 같은지

4.보유 기술이 하나 이상 선택되어야 한다.(select)

---

#1.id값이 없고 name값만 있기 때문에 input[name='id']를 이용한다.

(input 타입 직접 가져오기)

#2.id.length<5 || id.length>8  : id의 길이가 5개 이하거나 8개 이상일 때  (하나만 만족해도 html에 나타난다.

id.length<5 && id.length>8   :id 길이가 5개 이하이고 8개 이상일 때 ( 2개의 조건이 만족해야 html 나타남)

 

 

보유 기술 하나 이상 입력해야 할 때

5.AJAX

실행화면↓ (books.xml 정보가 나온다)

 

6.addClass, removeClass 이용

 

#.직접 css 처리와 class추가의 차이점

https://webisfree.com/2016-05-30/[jquery]-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%9D%98-%EC%B6%94%EA%B0%80-%EC%A0%9C%EA%B1%B0-%EB%B0%8F-%ED%99%95%EC%9D%B8-removeclass()-addclass()-hasclass() 

[jQuery] 클래스의 추가, 제거 및 확인, removeClass(), addClass(), hasClass()

 

 p에 스타일을 적용

select에 css style 적용하여 add / remove 한다.

 

7.아이디 중복 확인

 

 

 

 

idcheck.jsp

  실행화면↓

8.JSON

 

이처럼 배열에 jsonarray인 경우

 

이처럼 두번째 요소를 넣어준다

 

(9.아이디 찾기★)

 

 

 

10.load

- url