[AJAX] 응답데이터로 여러 개의 객체들이 담긴 ArrayList 받기

jsp

   : 응답데이터로 정보를 뽑아온다.(데이터를 보내서 요청X)

<button onclick="test4();">회원 전체 조회</button>
<table id="output4" border="1" style="text-align:center;">
    <thead>
        <th>번호</th>
        <th>이름</th>
        <th>나이</th>
        <th>성별</th>
    </thead>
    <tbody></tbody>
</table>
<script>
    function test4(){
        $.ajax({
            url: "jqAjax4.do",
            success: function(result){
                var str = 0;
                for(var i = 0; i < result.length; i++){
                    str += "<tr>"
                        +  "<td>"+ result[i].memberNo + "</td>"
                        +  "<td>"+ result[i].name + "</td>"
                        +  "<td>"+ result[i].age + "</td>"
                        +  "<td>"+ result[i].gender + "</td>"
                        +  "</tr>";
                }
                $("#output4 tbody").html(str);
            },
            error: function(){
                console.log("ajax 통신 실패");
            }
        });
    }
</script>

 

 

 

 

 

AjaxController4

   : 요청 처리됐다는 가정 하에 list에 Member 객체를 넣어서 한다.

@WebServlet("/jqAjax4.do")
public class JqAjaxController4 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public JqAjaxController4() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ArrayList<Member> list = new ArrayList<>(); // []
        list.add(new Member(1, "방국봉", 24, "남"));
        list.add(new Member(2, "붕붕이", 13, "여"));  
        list.add(new Member(3, "봉봉이", 10, "남"));  // [{방국봉}, {붕붕이}, {봉봉이}]
		
        response.setContentType("application/json; charset=UTF-8");
        new Gson().toJson(list, response.getWriter());
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

 

 

 

 

- 기본 화면

 

- 버튼 클릭 후 화면