AJAX (5) 응답데이터로 여러 개의 객체들이 담겨있는 ArrayList 받기

■ 응답데이터로 여러 개의 객체들이 담겨있는 ArrayList 받기

● jsp에서 html코드 작성하기

<button onclick="test4();">일반 게시판 조회</button>
	
<table id="output4">
	<thead>
		<tr>
			<th width="70">글번호</th>
			<th width="70">카테고리</th>
			<th width="300">제목</th>
			<th width="100">작성자</th>
			<th width="50">조회수</th>
			<th width="100">작성일</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

html 페이지

 

● script 코드 작성하기

<script>
	function test4(){
		$.ajax({
			url : "jqAjax4.do",
			success : function(result){
				console.log(result);
					
				let str = "";
				
				for(let i = 0; i < result.length; i++) {
					str += "<tr>"
						+ "<td>" + result[i].boardNo + "</td>"
						+ "<td>" + result[i].category + "</td>"
						+ "<td>" + result[i].boardTitle + "</td>"
						+ "<td>" + result[i].boardWriter + "</td>"
						+ "<td>" + result[i].count + "</td>"
						+ "<td>" + result[i].createDate + "</td>"
						+ "</tr>";
				}
				$("#output4 tbody").html(str);
			}
		});
	};
</script>

 

● jqAjax4.do servlet 코드 생성

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

	int listCount; // 현재 총 게시글 갯수(1000개)
	int currentPage; // 현재 페이지(즉, 사용자가 요청한 페이지)
	int pageLimit; // 페이지 하단에 보여질 페이징바의 페이지 최대 갯수(10개씩 할예정)
	int boardLimit; // 한 페이지에 보여질 게시글의 최대 갯수(10개씩 할예정)

	int maxPage; // 가장 마지막 페이지가 몇번째 페이지인지(총 페이지 개수)
	int startPage; // 페이지 하단에 보여질 페이징바의 시작수
	int endPage; // 페이지 하단에 보여질 페이징바의 끝수
	listCount = new BoardService().selectListCount();

	currentPage = Integer
			.parseInt(request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage"));

	pageLimit = 10;

	boardLimit = 10;

	maxPage = (int) Math.ceil((double) listCount / boardLimit);

	startPage = (currentPage - 1) / pageLimit * pageLimit + 1;

	endPage = startPage + pageLimit - 1;
		
	if (endPage > maxPage) {
		endPage = maxPage;
	}
		
	PageInfo pi = new PageInfo(listCount, currentPage, pageLimit, boardLimit, maxPage, startPage, endPage);

	ArrayList<Board> list = new BoardService().selectList(pi);
		
	response.setContentType("application/json; charset=UTF-8");
		
	new Gson().toJson(list, response.getWriter());

}

 

● 결과 확인하기

ajax 테스트 결과