Servlet-JSP MVC07 (2) - ajax로 JSON 다루기

- 멤버 list.do에서 버튼을 만들어서 번튼을 누르면 회원 목록이 나오도록 고쳐보자.

- 이때 버튼을 누르면 서버와 통신하여 member의 정보를 화면전환 없이 가져와야하므로 비동기 통신이 필요

 

 

1. List만들기 

 

1.1 버튼 만들기 

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1" onclick="memberList()">회원보기</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

function memberList(){
 
 $.ajax({
 
  url : "<c:url value='memberAList.do'/>",
  type : "GET",
  dataType : "json",
  success : resultList,
  error : function(){ alert("error");}
 });

}

> 부스트 트랩을 이용하여 버튼을 만들었다.

> 토글을 클릭하면, memberList()가 실행된다.

               - 서버와의 통신 결과 json을 응답으로 받는다.

               - 따라서 {[{memberVO},{memberVO},{memberVO}]}의 형태로 응답받을 것이다. 

 

1.2 처리 Controller만들기 

public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//gson은 json <-> 객체 
		Gson g = new Gson();
		List<MemberVO> list = new ArrayList<>();
		MemberDAO dao = new MemberDAO();
		list = dao.memberList();
        //기존 jsp가 가지고 있는 response와 다름
		response.setContentType("text/html;charset=utf-8");
	    response.getWriter().print(g.toJson(list));
		
		
		return null;
	}

 > DAO는 기존의 memberList메서드를 사용하면된다.

 

 > gson을 이용하면, List도 손쉽게 json으로 바꿀 수 있으며, jsonArray의 각 obj는 MemberVO로 

    [{"num":val, "id":val  ..  }, { memberVO }]  이와 같이 변한된다.

 

> response에 setContentType를 걸어주는 이유는 기존의 memberList.jsp가 memberList.do로 부터 전달받는 response와 

ajax를 통해 callback함수가 전달받는 response는 다르다. (response와 request는 요청당 한쌍이니 당연)

따라서 비동기 통신의 응답결과에서 한글이 깨지는 것을 막기 위해 걸었다.

 

1.3 callback함수 만들기

  function resultHtml(data){
	  var html="<table class='table table-hover'>";
	     html += "<tr>";
	     html +="<th>번호</th>";
		 html+= "<th>아이디</th>";
		 html+= "<th>비밀번호</th>";
		 html+= "<th>이름</th>";
		 html+= "<th>나이</th>";
		 html+= "<th>이메일</th>";
		 html+= "<th>전화번호</th>";
		 html+= "<th>삭제</th>";
	     html+= "</tr>";
	     
	     
	     $.each(data, function(index,obj){
	    	 
	    	 html += "<tr>";
		     html +="<td>"+obj.num+"</td>";
			 html+= "<td>"+obj.id+"</td>";
			 html+= "<td>"+obj.pass+"</td>";
			 html+= "<td>"+obj.name+"</td>";
			 html+= "<td>"+obj.age+"</td>";
			 html+= "<td>"+obj.email+"</td>";
			 html+= "<td>"+obj.phone+"</td>";
			 html+= "<td>삭제</td>";
		     html+= "</tr>";
	    	 
	     })
	      html+="</table>";
	     
	     $("#collapse1 .panel-body").html(html);
	  
  }

 > $.each는 제이쿼리 반복문으로 (data, function(index,obj){ //..구현 사항 })으로 사용할 수 있다.

       - data(배열)에 대해 index에 따라 obj(객체 data[index])가 나온다.

> $("collapse1 .panel-body").html(html);

     > collapse1의 id에 자손 중 panel-body클래스를 가지고 있는 태그선택

     > .html로 해당 내용을 가지고 올 수 도 있고, html을 해당 태그에 적용할 수 도 있다.

 

2. List삭제 

 

삭제도 ajax를 이용해서 구현하여, 버튼을 누르면 새로고침 할 필요없이 바로 반응하도록 만들어보자.

 

2.1 삭제 버튼에 onclick넣고 함수만들기 

 

html += "<td><input type='button' class='btn btn-warning' value='삭제' onclick='delFn("+obj.num+")'></td>"

function delFn(num){

  $.ajax({
    
     url : "<c:url value='/memberAdel.do'/>",
     type : "get",
     data : {"num" : num},
     success : memberList,
     error : function(){alert("error");}
  
  })

}

> 콜백함수로 memberList를 넣은 이유는 삭제후 다시 memberList를 호출하여 화면전환 없이 삭제를 반영하게 하기 위함    이다.(만약 콜백함수 없이 만들었다면, 삭제 후 새로고침해야 화면에 나타난다.)

 

2.2 controller 만들기

public String requestHandler(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		
	int num=Integer.parseInt(request.getParameter("num"));
		
		MemberDAO dao=new MemberDAO();
		int cnt=dao.memberDelete(num);
		
		response.getWriter().print(cnt);
		//형식적으로 response해준것 cnt를 가지고 뭘 하진않음 memberList()자체가 매개변수도없으~
		
		// TODO Auto-generated method stub
		return null;
	}

> 컨트롤러는 간단하게 위와 같이 만들 수 있다.

> 응답에 데이터를 넣는 것은 의미 없지만 형식적으로 보냈다.

 

참고자료: 나프2탄 (인프런) - 박매일

https://www.inflearn.com/course/%EB%82%98%ED%94%84-mvc-2/dashboard

[NarP Series] MVC 프레임워크는 내 손에 [나프2탄] - 인프런 | 강의