초보자를 위한 AJAX통신으로 회원가입기능 간단히 만들기

 

ajax통신은 비동기방식 통신의 하나로 학원다닐때 스치듯 배웠는데, 

다시 공부 삼아 기능을 구현해 보았다.

나는 회원가입기능을 만들때 보통은 아래와 같이 form형식+ submit버튼 조합으로 만들었다.

<form method="get" action="SignIn.do">
        <table border="1">
            <tr>
                <td>아이디</td>
                <td><input type="text" name="ID" id="ID"></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="text" name="PASSWORD" id="PASSWORD"></td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input type="text" name="NAME" id="NAME"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="submitButton"><input type="submit" value="회원가입" id="btn_submit"></div>
                </td>
            </tr>
        </table>
</form>

 그래서 ajax통신으로 기능을 만들고 싶어 간단하게 구현 해보았다.

 

간단하게 환경을 소개하자면 spring기반인 전자정부프레임워크 IDE툴을 사용하여 구현 하였으며,

다른분들은 DAO와 sqlSession을 이용하여 만든예제가 많은데,

나는 좀더 간편히 만들기 위하여 mybatis 기반의 mapper를 이용하여 구현하였다.

1.DB작성

CREATE TABLE CUSTOMMEMBER(
ID VARCHAR(30) NOT NULL PRIMARY KEY,
PASSWORD VARCHAR(30) NOT NULL,
NAME VARCHAR(30) NOT NULL,
AUTHORITY VARCHAR(30) DEFAULT 'ROLE_MEMBER',
ENABLED INT DEFAULT '1'
)DEFAULT CHARSET=UTF8

2.memberVO작성

DTO또는 VO라고 하는데 의미는 좀 다르나 저는 혼용해서 사용하며, 보통은 입력한 데이터를 내부에서 담아 옮기는 그릇의 역할이라고 이해 하시면 좀더 쉬울것 같다.

package ddi.main.domain;

public class memberVO {

	String ID;
	String PASSWORD;
	String NAME;
	
	public String getID() {
		return ID;
	}
	public void setID(String iD) {
		ID = iD;
	}
	public String getPASSWORD() {
		return PASSWORD;
	}
	public void setPASSWORD(String pASSWORD) {
		PASSWORD = pASSWORD;
	}
	public String getNAME() {
		return NAME;
	}
	public void setNAME(String nAME) {
		NAME = nAME;
	}
}

3.memberMapper.xml 부분 작성

mapper.xml을 작성할때 주의해야 될 부분이 mapper namespace를 작성할때는 해당하는 mapper인터페이스의 패키지경로와 클래스이름을 맞게 지정해 줘야 된다.

그리고 id부분은 mapper인터페이스의 메서드이름과 맞춰줘야한다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="ddi.main.mapper.memberMapper">

<insert id="signIn">
   INSERT INTO CUSTOMMEMBER (ID,PASSWORD,NAME) VALUE(#{ID},#{PASSWORD},#{NAME});
</insert>

</mapper>

 4.memberMapper인터페이스 작성

위에 말했듯 아래 mapper인터페이스의 패키지 경로와 클래스명을 맞춰줘야함.

그리고 위에 id="signIn" 은 아래 mapper인터페이스의 signIn과 똑같아야함.

파라미터안에는 위에서 만들어준 memberVO를 선언해준다.

package ddi.main.mapper;

import ddi.main.domain.memberVO;
import ddi.main.security.CustomUserDetails;
import egovframework.rte.psl.dataaccess.mapper.Mapper;

@Mapper("memberMapper")
public interface memberMapper {
	
	public int signIn(memberVO vo);

}

5.memberService인터페이스 작성

package ddi.main.service;

import ddi.main.domain.memberVO;

public interface memberService {
	
	public int signIn(memberVO vo) ;

}

6.memberService인터페이스 작성

위에 memberService을 상속 받고 아까 작성해준 memberMapper객체를 주입하기위해 @Autowired를 설정하여 주입해준다. mapper인터페이스에 정의한 signIn메서드를 부른다.

package ddi.main.service;

import javax.annotation.Resource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import ddi.main.domain.memberVO;
import ddi.main.mapper.memberMapper;

@Service("memberService")
public class memberServiceImpl implements memberService{

	@Autowired
	private memberMapper mapper;
	
	@Override
	public int signIn(memberVO vo) {
		return mapper.signIn(vo);
	}
	

}

7.memberController 작성

위에 작성한 memberService객체를 @Autowired로 주입함.

@RequestMapping은 지정한 url과 controller를 mapping 하기위함이니, url과 맞춰줘야함.

@ResponseBody는 자바 객체를 HttpResponse의 본문 responseBody의 내용으로 매핑하는 역할을 하며, return Type에 맞는 MessageConverter를 통해 return 하는 객체를 해당 타입으로 변환해서 클라이언트로 전달함

여기서는 리턴타입을 String으로 설정하여 회원가입 성공시 message 변수에 담아 반환한다.

참고로 mapper와 service를 보면 반환 타입을 int로 설정하여 메서드가 잘 수행되면 숫자 1로 반환 하도록 했음.

package ddi.main.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import ddi.main.domain.memberVO;
import ddi.main.service.memberService;

@Controller
public class memberController {
	
	@Autowired
	private memberService service1;
	
    @RequestMapping("/signInPost.do" )
    @ResponseBody
    public String signIn(memberVO vo) {
    	System.out.println("signIn.do Post로 회원가입 들어옴");
    	
    	String message = "";
    	
    	int num = service1.signIn(vo);    	

    	if(num == 1) {
    		message = "ok";
    	}else {
    		System.out.println("실패!!!!!");
    	}
    	
    	return message;
    }

}

8.JSP 작성

여기서 종종 하는 실수가 input type을 submit으로 하는 경우가 있는데 submit은 동기방식이라 비동기방식인ajax에서는 자바스크립트가 작동이 잘 안될 수 있으니 input type="button"으로 되어 있는지 확인 해보길 바란다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>

<style>
table, td, tr{
    border: 1px solid black;
    border-collapse: collapse;
}
.submitButton{
    margin-left: 90px;
}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.js" ></script> 
<script>
$(function(){
	
	$("#btn_submit").click(function(){
		
		var ID = $("#ID").val();
		var PASSWORD = $("#PASSWORD").val();
		var NAME = $("#NAME").val();
		
		ID = $.trim(ID);
		PASSWORD = $.trim(PASSWORD);
		NAME = $.trim(NAME);
		
		if(ID == ""){
			alert("아이디를 입력해 주세요.");
			$("#ID").focus();
			return false;
		}
		if(PASSWORD == ""){
			alert("패스워드를 입력해 주세요.");
			$("#PASSWORD").focus();
			return false;
		}
		if(NAME == ""){
			alert("이름을 입력해 주세요.");
			$("#NAME").focus();
			return false;
		}
		
		$("#ID").val(ID);
		$("#PASSWORD").val(PASSWORD);
		$("#NAME").val(NAME);
		
		//serialize가 form요소하나하나를 읽어옴
		var formData = $("#frm").serialize();
		
		
		$.ajax({
			/* 전송 전 세팅 */
			type:"POST", //http메서드를 쓰면됨
			data:formData, //화면에 입력한 데이터 위에 변수 선언한거
			url:"signInPost.do", //데이터를 전송하여 저장시키는 url
			dataType:"text", //리턴타입, 성공여부를 text로 추출해줌

			/* 전송 후 세팅 */
			success: function(result) { //controller에서 return받은 message부분임
				if(result == "ok"){
					alert("저장 완료");
					location="login.do"; //저장이 완료된 이후 이동하는 url
				}else{
					alert("저장실패");
				}
			},
		    error: function() { //시스템에러
		    	alert("오류발생");
			}
		});
		
	});
});

</script>

</head>
<body>
    <header>
        <h1>회원가입</h1>
    </header>
    <section>
    
    <form id="frm">
        <table border="1">
            <tr>
                <td>아이디</td>
                <td><input type="text" name="ID" id="ID"></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="text" name="PASSWORD" id="PASSWORD"></td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input type="text" name="NAME" id="NAME"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="submitButton"><input type="button" value="회원가입" id="btn_submit"></div>
                </td>
            </tr>
        </table>
      <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
    </form>  
       
    </section>
</body>
</html>