[메타코딩] 스프링부트 강좌 35강(블로그 프로젝트) - 회원가입을 위한 기초세팅

- joinForm.jsp 파일을 아래와 같이 수정합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<form>
		<div class="form-group">
			<label for="username">Username</label>
			<input type="text" class="form-control" placeholder="Enter username" id="username">
		</div>
		
		<div class="form-group">
			<label for="password">Password</label>
			<input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		
		<div class="form-group">
			<label for="email">Email</label>
			<input type="email" class="form-control" placeholder="Enter email" id="email">
		</div>
	</form>
	
	<button id="btn-save" class="btn btn-primary">회원가입완료</button>
</div>

<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

필자는 form태그의 action, method를 이용한 form submit이 아닌 ajax를 이용하여 데이터 통신을 위해 위와 같이 설정하였습니다.

 

 

- user.js

static 하위에 js 폴더를 만들고 user.js 파일을 생성합니다.

let index = {
	init: function() {
		$('#btn-save').on('click', () => {
			this.save();
		});
	}
	
	, save: function() {
		let data = {
			user: $('#username').val(),
			password: $('#password').val(),
			email: $('#email').val()
		}
	}
}

index.init();

joinForm.jsp의 button에 대해 이벤트를 부여하고 form태그 내의 값들을 지정하는 로직입니다.

 

 

 

강의 주소 : https://youtu.be/oOJR2XCagdA