한 번에 ArrayList에 담아 리턴하고 싶다면 GSON을 쓰는 게 좋음!
⌨️ index.jsp
👉🏻 값이 잘 넘어오는지만 확인해 볼 용도
<h3>3. 조회 요청 후 조회된 회원 리스트를 응답받아서 출력해 보기</h3>
<button onclick="test3();">회원 전체 조회</button>
<br><br>
<table border="1" id="result3">
<thead>
<tr>
<th>아이디</th>
<th>이름</th>
<th>나이</th>
<th>전화번호</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function test3() {
$.ajax({
url : "ajax3.do",
sucess : function(result) {
console.log(result);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>
💻 AjaxController
@ResponseBody
@RequestMapping(value="ajax3.do", produces="application/json; charset=UTF-8")
public String ajaxMethod3() {
// DB를 통해 모든 회원의 정보를 조회했다라는 가정하에 ArrayList 생성
ArrayList<Member> list = new ArrayList<Member>();
// JDK 8 버전 쓸 때는 문법상 <제네릭> 생략이 가능했으나 6 버전에서는 생략 불가함!
list.add(new Member("user01", "pass01", "홍길동", 20, "01011112222"));
list.add(new Member("user02", "pass02", "김말똥", 30, "01022223333"));
list.add(new Member("user03", "pass03", "박개순", 25, "01099998888"));
list.add(new Member("user04", "pass04", "이말순", 50, "01088887777"));
return new Gson().toJson(list);
}
💻 index.jsp
👉🏻 ArrayList 형식으로 뽑기
<script>
function test3() {
$.ajax({
url : "ajax3.do",
success : function(result) {
// console.log(result);
var resultStr = "";
for(var i = 0; i < result.length; i++) {
resultStr += "<tr>"
+ "<td>" + result[i].userId + "</td>"
+ "<td>" + result[i].userName + "</td>"
+ "<td>" + result[i].age + "</td>"
+ "<td>" + result[i].phone + "</td>"
+ "</tr>";
}
$("#result3>tbody").html(resultStr);
},
error : function() {
console.log("ajax 통신 실패!");
}
});
}
</script>