[goormedu 강의] 스프링부트 블로그 만들기 05 - 03 회원가입을 위한 기초 세팅

해당 글은 groomedu의 스프링부트 나만의 블로그 만들기 강의를 보고 개인적으로 정리한 글입니다.

form 전송을 전송하지 않고 ajax로 form 값 insert

<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>

 

button 클릭시 user.js 파일에서 ajax 처리

 

let index={
	init:function(){
		$("#btn-save").on("click", ()=>{
			this.save();
		});
	},
	
	save: function(){
		//alert("user의 save 함수 호출");
		let data = {
			username: $("#username").val(),
		 	password: $("#password").val(),
			email: $("#email").val(),
		}
		
		//console.log(data);
		
		$.ajax().done().fail(); //ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 insert 요청
	}
}
index.init();

index의  init() 함수에서 앨리먼트의 id 값이 btn_save인 버튼 클릭하면

index의 save() 함수 호출, data 변수에 username, password, email 값 담고

ajax 통신 진행