#17 회원가입을 위한 세팅(+jQuery, Ajax)

 

일단 시작 전에 index.jsp의 카드에서 내용 적는 부분들을 삭제시키자

빨간색 네모로 표시한 부분들을 삭제한다.

 

 

실행결과 :

 

 

이제 joinForm.jsp을 살펴보자

form action에서 method를 POST로 전송하는 것은 아주 익숙한 옛날 방식이다.

 

여기서는 이 방식을 사용하지 않고, JSON으로 데이터를 전송하도록 하겠다.

Username, Email, Password 이 값 3개를 자바스크립트에서 가져가서 ...

 

우선 static폴더 안에 js폴더를 생성하고 그 안에 user.js를 만든다.(자바스크립트 파일)

 

 

joinForm.jsp에서 폼 안에 있던 버튼을 다음과 같이 폼 밖으로 빼낸다.

 

그리고 type="submit"을 지우고 id를 다음과 같이 추가한다.

 

또한 user.js를 참조하는 코드를 작성한다.

 

이제 참조되는 user.js를 작성해주자

 

 

그리고 중요한 것이 있는데, jQuery를 사용하기 위해 jQuery 라이브러리를 사용해야한다.

현재 footer.jsp에 해당 라이브러리들을 가져오게 했는데, footer.jsp에서 이 코드들을 잘라내기하고

 

header.jsp에 붙여넣기한다.

 

 

왜냐하면 코드가 다음과 같이 작성되어 있고 footer.jsp에 라이브러리가 있는데

jQuery가 존재하는 user.js를 참조하는 코드가 앞서 있기 때문에

이렇게 실행하면 "jQuery같은거 몰라! $가 뭔데?!" 하면서 오류가 발생한다.

따라서 맨 앞에 있는 header.jsp에 해당 코드들을 옮긴 것이다.

 

이렇게 footer.jsp에 있는 라이브러리를 가져오는 코드들을 header.jsp에 이동시키면

jQuery를 사용할 수 있게된다.

 

 

실행결과 :

성공적으로 jQuery가 작동하였다.

 

회원가입 완료 버튼을 눌러보면 다음 파일들이 모두 정상적으로 존재하는 것을 확인할 수 있다.

 

이제 alert()로 함수가 제대로 작동한다는 것은 알았으니, 함수를 제대로 작성해보도록 하자

 

그리고 joinForm.jsp에서 해당 id들이 username, password, email이 맞는지 확인하자

 

나의 경우 id="pwd"로 되어있어서 id="password"로 수정했다.

 

 

실행결과 :

성공적으로 실행된 모습이다.

 

 

이제 본격적으로 ajax를 이용해서 회원가입 기능을 구현해볼 단계이다.

 

 

아침부터 밤12시인 지금까지 하루종일 코딩하느라 지쳐서 여기까지만 해야겠다 ㅎㅎ

 

다음 시간엔 ajax를 이용한 회원가입 기능 구현을 하겠다!!

 

 

 

 

참고자료 : https://youtu.be/oOJR2XCagdA