[SPRING] 자식 창 ajax 폼 컨트롤러 전송 후 부모창 값 변경 방법

ajax 폰 전송을 하기 위해서jQuery에서는 serialize() 라는 메소드를 사용하여 Form 태그내의 항목들을 자동으로 읽어와

queryString 형식으로 변환시켜주어 사용가능합니다. 저는 이번엔 간단하게 아이디 비밀번호를 출력시켜주는 화면을 만들어 그 값들을 바꿔주는것을 해보겠습니다.

UserVO

public class UserVO {
    private String id;
    private String pw;
    private String name;
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getPw() {
        return pw;
    }
    public void setPw(String pw) {
        this.pw = pw;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

user의 정보를 가져오는 UserVO 입니다.

public interface UserDAO {
    public UserVO read(String id); // read
    public List<UserVO> listAll(); // 모든 user
}

userDAO interface입니다.

@Repository
public class UserDAOImpl implements UserDAO {
 
    @Inject
    SqlSession session;
    
    private static final String namespace =  "com.company.mappers.UserMapper";
 
    @Override
    public UserVO read(String id) {
        // TODO Auto-generated method stub
        return session.selectOne(namespace + ".read", id);
    }
 
    @Override
    public List<UserVO> listAll() {
        // TODO Auto-generated method stub
        return session.selectList(namespace + ".listAll");
    }
 
}
 

UserDAO 상속받은 UserDAOImpl 입니다.

이제 서비스를 만들께요.

public interface UserService {
    public int log_inCheck(String id, String pw);
    public UserVO read(String id);
    public List<UserVO> listAll();
}
 
 

UserService 인터페이스 입니다.

@Service
public class UserServiceImpl implements UserService {
 
    @Inject
    UserDAO dao;
 
    @Override
    public UserVO read(String id) {
        // TODO Auto-generated method stub
        return dao.read(id);
    }
 
    @Override
    public List<UserVO> listAll() {
        // TODO Auto-generated method stub
        return dao.listAll();
    }
 
}
 

UserService 상속받은 UserServiceImpl 입니다.

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="com.company.mappers.UserMapper">
    <select id = "read" resultType = "com.company.domain.UserVO">
        select * 
        from   User
        where  id = #{id}
    </select>
    
    <select id = "listAll" resultType = "com.company.domain.UserVO">
        select *
        from   User
    </select>
    <update id="update">
        update member
        set    name = #{name},
               pw = #{pw}
        where  id = #{id}
    </update>
</mapper>
 

각각 해당하는 sql 구문을 만들어주었습니다.

그럼 이제 컨트롤러로 가서 listAll을 모델에 넣어야겠죠 ?

@Controller
public class HomeController {
    
    @Inject
    UserService u_service;
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Model model) {
        List<UserVO> user_list = u_service.listAll();
        model.addAttribute("user_list", user_list);
        
        return "home";
    }

이렇게 넣어 준 뒤 home.jsp로 이동하여 모델로 받아온 user_list를 foreach를 통해서 뿌려줄꺼에요

<table class = "table table-bordered">
        <tr>
            <th>아이디</th>
            <th>패스워드</th>
        </tr>
        <c:forEach items = "${user_list}" var = "vo">
            <tr onclick = "rowClick('${vo.id}')">
                <td id = "id">${vo.id}</td>
                <td id = "pw">${vo.pw}</td>
                <td id = "name">${vo.name}</td>
            </tr>
        </c:forEach>
    </table>

전 부트스트랩을 적용시켜서 class를 따로줬습니다.

그러면 이렇게 출력이 됩니다.

여기서 이제 한 row를 클릭했을 때 팝업 창을 띄우고 그 팝업창에 선택한 row의 정보를 읽어올꺼에요

그럼 tr에 onclick 메소드를 넣습니다. 그리고 td 각각에 id 값을 줄거에요 나중에 수정 시 들어갈 값이 바뀌어야하기때문입니다. 추후 알아보겠습니다.

이제 한 tr이 눌렸을 때의 function을 작성합니다.

<script>
    function rowClick(id){
        window.open(
            "user_pop_up?id=" + id,
            "user_pop_up_frame",
            "width=500, height = 500"
                    
        );
    }
</script>

rowClick했을 때 파라미터로 id값을 받아와 user_pop_up 컨트롤러로 가는 url을 지정해주었습니다.

controller 부분입니다.

@RequestMapping(value = "user_pop_up", method = RequestMethod.GET)
    public String user_pop_up(@RequestParam("id") String id, Model model) {
        UserVO vo = u_service.read(id);
        model.addAttribute("vo", vo);
        return "user_pop_up";
    }

vo를 선언 후 서비스를 이용해 id 값에 해당하는 값들을 불러온 뒤 모델에 담아주고나서 user_pop_up.jsp를 호출합니다.

user_pop_up.jsp를 작성해야되겠죠 ?

user_pop_up.jsp 입니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
</head>
<body>
    <form id = "frm">
        <input type = "hidden" id = "id" value = "${vo.id}">
        <label>아이디 : </label> <input name = "id" type = "text" value = "${vo.id}">
        <br>
        <label>비밀번호 : </label> <input name = "pw" type = "text" value = "${vo.pw}">
        <br>
        <label>이름 : </label> <input name = "name" type = "text" value = "${vo.name}">
    </form>
    <button id = "update_btn">수정하기</button>
</body>
</html>

model에서 받아온 vo의 값을 뿌려줍니다. 여기서 jquery가 필요하기 때문에 cdn으로 등록시켜주었습니다.

출력화면입니다.

이렇게 결과화면이 잘 나오는 것을 확인할 수 있습니다. 이제는 수정하기버튼을 눌리면 아이디 비밀번호 값을 가진 form을 ajax통신 후 부모창이 새로고침 없이 값을 바꾸는 작업을 할껍니다.

수정하기 버튼을 눌렸을 때 함수입니다.

<script>
    $("#update_btn").click(function(){
        var frm = $("#frm").serialize(); // 해당하는 frm을 serialize를 해줍니다. ajax로 데이터를 보내기위해서 하는 작업입니다.
        var id = $("#id").val(); // id값은 기본키이자 바뀌면안되는것이고 id값으로 조건을 줄꺼라서 고유 id 값을 받아옵니다.
        $.ajax({
            type : "post", // post방식으로 전송
            url : "update_user", // controller로 보낼 url
            data : frm, // data로는 위에서 serialize한 frm을 보냅니다.
            async : false, // 전역변수 사용을 위해서 설정해준다
            dataType : "json", // serialize하면 json형태로 값을 보내줘야합니다.
            contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 인코딩 설정
            success : function(data){
                $(opener.document).find("tr[id=" + id + "]>td[id=id]").text(data.id); // 보모창에서 현재 변경될 td를 찾은 후 값을 변경해줍니다.
                $(opener.document).find("tr[id=" + id + "]>td[id=pw]").text(data.pw); // 보모창에서 현재 변경될 td를 찾은 후 값을 변경해줍니다.
                $(opener.document).find("tr[id=" + id + "]>td[id=name]").text(data.name); // 보모창에서 현재 변경될 td를 찾은 후 값을 변경해줍니다.
                self.close(); // 변경 후 자식 창을 받아줍니다.
            }
        });
    });
</script>

주석에 최대한 설명을 달아놓았으니 설명은 패스하겠습니다.

이제 controller를 작성할께요.

    @RequestMapping(value = "update_user", method = RequestMethod.POST)
    @ResponseBody
    public UserVO update_user(UserVO vo, Model model) {
        u_service.update(vo); // 받아온 vo를 update 시켜줍니다.
        UserVO readVO = u_service.read(vo.getId()); // update 시킨 후 다시 update 시킨 row를 찾아 readVO에 담아줍니다.
        System.out.println(vo.getId());
        return readVO; // readVO를 ajax success data로 넘겨줍니다.
    }

이렇게하면 완성이됩니다.

한번 테스트해보시길~