[Springboot] 블로그 만들기 (17)_회원가입(1)

JavaScript 파일 생성

 

 

loginForm.jsp의 Form태그 내부에 있던 <button> 태그를 밖으로 뺴주고 user.js파일을 참조하는 코드를 작성한다.

    <!-- 
    Form 태그안에 버튼이 있을 경우 input버튼에 포커스가 있을때 Enter를 누르면 자동으로 submit동작을 한다. 그래서 밖으로 빼준다.
    <button id = "btn-save" class="btn btn-primary">회원가입완료</button> 
    -->
</form>
<button id = "btn-save" class="btn btn-primary">회원가입완료</button>

<script src="/blog/js/user.js"></script> <!-- user.js 파일을 여기서 사용하겠다. -->

 

user.js

let index = {
	init: function(){
		$("#btn-save").on("click",()=>{
			this.save();
		}); // on(이벤트,함수) 이벤트가 발생하면 함수 실행
	}
	
	,save: function(){
		alert('user의 save함수 호출됨');
	}
}	

index.init();

 

테스트

F12 개발자 도구- Network를 확인 user.js의 Status가 200으로 정상적으로 작동하는 것을 알 수 있다.

 

잘 동작하는걸 확인했으니 input박스에 있는 값을 출력해보자.

user.js

let index = {
	init: function(){
		$("#btn-save").on("click",()=>{
			this.save(); // id가 btn-save인 것을 클릭하면 save함수가 호출된다.
		}); // on(이벤트,함수) 이벤트가 발생하면 함수 실행
	}
	
	,save: function(){
		//alert('user의 save함수 호출됨');
		let data = { // joinForm input태그의 id로 값을 가져와서 저장
			userName : $("#username").val(),
			password:$("#password").val(),
			email:$("#email").val()
		}
		
		console.log(data); // {userName: '쫑이', password: '1234', email: 'jjong2@naver.com'}
		
	}
}	

index.init();

---

참고 유튜브 (메타코딩님 강의)

https://youtu.be/oOJR2XCagdA?si=3mFenej1Y-9QZwUw