Spring MVC02 - Ajax MemberList

 

- Servlet-jsp에서 ajax를 이용해서 회원리스트 보기를 했던 것과 동일한 작업을 할 것이다.

 

 

1. 화면 및 javascript 구성

<tr>
  <td>
  <input type="button" value="ajax로  회원리스트 보기 " onclick="btnClick()"/>
  </td>
</tr>
</table>
<div id="list" >회원리스트 출력</div>

function btnClick(){
	  $.ajax({
		  
		  url : "<c:url value='/memberAjaxList.do'/>",
		  type : "get",
		  dataType : "json",
		  success : resultHtml.
		  error : function(){alert("error");}
		  
	  });
  }

function resultHtml(data){
	  console.log(data);
	  var html = "<tabel class='table table-bordered'>";
	  html += " <tr>";
	  html += "  <td>번호</td>";
	  html += "  <td>아이디</td>";
	  html += " <td>비밀번호</td>";
	  html += "  <td>이름</td>";
	  html += " <td>나이</td>";
	  html += "  <td>이메일</td>";
	  html += "  <td>전화번호</td>";
	  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 += " </tr>";
	  })
	  html += "</table>";
	  $("#list").html(html);
  }

 

2. controller 

 

@RequestMapping("/memberAjaxList.do")
	public @ResponseBody List<MemberVO> memberAjaxList() {
		//@ResponseBody String view 넘기고 forward model이런거 말고 바로 객체 응답
		List<MemberVO> list =memberMapper.memberList();
		//응답을 $.ajax() -> callback 함수로 json pojo에선 response로 응답했음 
		//프론트 컨트롤러로 넘기는게 아니라! 바로 ajax로 응답 @Responsebody
		
		return list; // Object->Json (Jackson-databind)
	}

- Spring에서는 ajax를 사용하기 위해 내부 api를 많이 이용한다.

- @ResponseBody를 메서드 return 타입 앞에 붙이면,

메서드 처리결과를 frontcontroller로 보내지 않고 객체를 바로 응답으로 내보낸다. 

- 이때 List<MemberVO>를 json으로 만들어서 보내기 위해 

  Jackson-binder랑 Jackson-mapper api를 통해 내부적으로 처리된다.

  

각각 mvnrepository에서 찾아서 pom.xml에 추가해두면 된다.

 

 

-위와 같이 비교적 간단하게 할 수 있다.

Servlet-JSP였으면, pojo에서 json으로 고친다음에 response를 이용했을 것이다.