37. 회원가입을 위한 기초세팅

joinFrom.jsp

• form 태그에 method와 action을 넣지않고 데이터를 json으로 보낼예정이기에 form태그 밑에 회원가입버튼을 누르면 js가 작동하여 데이터를 보낼것이다.
• <script src="/js/user.js"></script> 스크립트 연결

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

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

<div class="container">
  <h2>Stacked form</h2>
  <form>

    <div class="form-group">
      <label for="username">username:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
    </div>

    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>


  </form>
  <button id="btn-save" class="btn btn-primary">회원가입</button>
</div>

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

 

user.js

resource > static 밑에 js 디렉터리 만든 후 js 디렉터리 밑에 user.js 만든다.

let index = {
    init:function(){
        $("#btn-save").on("click",()=>{ // function(){} 대신 ()=> 사용한 이유는 this를 바인딩하기 위해서
            this.save();
        });
    },

    save: function(){
        // alert('user의 save호출됨');
        let data = {
            username: $("#username").val(),
            password: $("#password").val(),
            email: $("#email").val()
        }
        // console.log(data);

        $.ajax({
            type: "POST",
            url: "/api/user",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function(resp){
            if(resp.status==5){
                alert("회원가입에 실패하였습니다.");
            }else{
                alert("회원가입이 완료 되었습니다.")
            }

            location.href="/";
        }).fail(function(error){
            alert(JSON.stringify(error));
        });


    },// save end

}// index end
index.init();