Spring MVC(5) Jquery Ajax를 이용한 로그인 처리

오늘은 Ajax를 이용한 회원 가입을 구현해보자.

우선 마스크처리를 하여 좀더 보기 좋게 구현해 보았다.

다음과같이 회원가입 창을 띄운 후 

서버와 통신중에 로딩표시를 해주는건데 ... 솔직히 연동시 0.1초도 걸리지 않아서 일부러 setTimeout 효과를 좀 줬다 ㅡㅡ;

 정상적으로 처리되었다는 창이뜨고 확인을 누르면 마스크가 사라진다.

자 그럼 이제 소스를 보도록 하자.
이제 프로젝트가 어느정도 진해된 만큼 파일이 많아졌다.

이번에 변경하거나 추가해야할 파일들이다.

소스가 길어지니 일부분만 보면서 통소느는 마지막에 올리도록 하겠다.

우선 기본적인 HTML은 다들 알거라 생각하고 Form쪽 HTML설명은 생략하도록 한다.

여러 값들을 입력후 Jquery의 Function을 호출할것이다. 그럼 Ajax를 처리하는 로직을 실행하게 된다. 거기에서 부터 설명을 시작하겠다.

 1.joinAjaxData.js 

var ajaxPostSend =  function() {
    
    parent.startLayer();      //레이어 시작
    var url = "joinAjax.blog";   //Controller 호출
    var postString = "";       // post방식으로 처리하기 위한 파라미터들
    postString   = "id=" + $('#id').val();
    postString += "&password=" + $('#password').val();
    postString += "&name=" + $('#name').val();
    postString += "&email=" + $('#email').val();

    
    $.ajax({                          // 이부분부터 비동기통신을 하게 된다. 위에서 설정한 값들을 입력후

        type: "POST",
        url: url,
        data: postString,
        success: function(msg) {  //성공시 이 함수를 호출한다.
            setTimeout('parent.stopLayer('+msg+')',2500); 
       }
    });
 };

2.joinResponseAjaxData
ajax에서 컨트롤러를 호출하면 해당 컨트롤러에 접근된다.

package com.blog.web.ajax;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.blog.mybatis.UserDaoImpl;
import com.blog.vo.UserVo;

@Controller
public class joinResponseAjaxData {
    
    private static final Logger logger = LoggerFactory.getLogger(joinResponseAjaxData.class);
    
    @Resource(name="userDaoImpl")
    private UserDaoImpl userDaoImpl;
    
    @RequestMapping("joinAjax.blog")
    public ModelAndView main(HttpServletRequest request) {  //HttpServletRequest 를 받아서 처리한다.
        
        String result = "0";
        
        logger.info("User Join AjaxData");
        
        ModelAndView mav = new ModelAndView("main");
        mav.setViewName("ajax/joinAjaxData");
        
        String id = request.getParameter("id");
        String password = request.getParameter("password");
        String email = request.getParameter("email");
        String name = request.getParameter("name");
        
        UserVo userVo = new UserVo();  //파라미터 값을 Vo클래스에 추가한후
        userVo.setUserId(id);
        userVo.setUserPassword(password);
        userVo.setUserName(name);
        userVo.setUserEmail(email);
        
        int resultValue = 0; 
        
        try { resultValue = userDaoImpl.insertUser(userVo) ; } catch(Exception e) {} //서비스 클래스를 이용해 결과를 받아온다.
        
        if (resultValue == 1) { //정상적으로 처리가 됬으면 성공한 로우의 수인 1을 받아오므로 이렇게 처리를 했다.
            result ="1";
        }
        mav.addObject("result", result); 해당 값을 뷰로 넘겨준다.
        return mav; 
        
    }
}

3.joinAjaxData.jsp
해당 페이지에선 컨트롤러에서 받은 result를 가져온게 전부이다. 

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

성공시 함수가 받은 인자인 msg가 바로 joinAjaxData페이지의 출력 값이다.

success: function(msg) { 
            setTimeout('parent.stopLayer('+msg+')',2500); 
       }

  이렇게 소스는 간단하게 알아보았다. 

아래는 지금까지 진행된 프로젝트의 풀소스이다.

다만 HTML소스는 무지 엉망이다 필자가 CSS를 잘 다루지 못해 스타일로 마구잡이로 코딩하였다.
진행하면서 HTML도 조금씩 신경써써 코딩하도록 하겠다 ㅡㅡ;
테이블은 지금은 유저테이블 하나고 테이블이 조금씩 늘어나면 테이블 관리 페이지도 별도로 포스팅하도록 하겠다.
 

blog.zip