AJAX를 이용해서 HTML 페이지 가져오기

• 순서

1. ajax 메소드 호출
2. 서블릿으로 이동해서 값을 저장한 후 새로운 jsp 파일로 이동
3. 이동한 jsp 파일에서 값을 이용해 페이지를 만듬
4. 만든 페이지가 ajax메소드의 data로 들어감
5. data를 출력하면 해당 페이지가 나옴

// ajax 메소드 호출

	<h2>html 페이지를 받아서 처리하기</h2>
	<button id="btnhtml">html페이지 받아오기</button>
	<div id="htmlcontainer"></div>
	<script>
		$("#btnhtml").click(e=>{  // e=> 랑 function(e) 랑 동일함
			$.ajax({
				url:"<%=request.getContextPath()%>/ajax/htmlTest.do",  
				dataType:"html",
					success:function(data){
						console.log(data);   // 리턴받은 데이터는 htmlresponse.jsp안의 코드들이다
						$("#htmlcontainer").html(data); // html코드를 받아오는것은 좋은 코드가 아님
					}
			});
		});
	</script>

// 서블릿코드

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Actor> actors=List.of(Actor.builder().name("박보검").phone("01043259874")
				.profile("parkBogum.jpg").build(),
				Actor.builder().name("쥴리아로버츠").phone("01023486637")
				.profile("juliaRoberts.jpg").build(),
				Actor.builder().name("멧데이먼").phone("01012331432")
				.profile("mattDamon.jpg").build()
				);
		
		request.setAttribute("actors", actors);
		request.getRequestDispatcher("/views/htmlresponse.jsp").forward(request, response);
	}

// 새로운 jsp 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@page import="java.util.List,com.ajax.model.vo.Actor"%>

 <%
 	List<Actor> actors=(List)request.getAttribute("actors");
 %>   
 
 <table>
 	<tr>
 		<th>이름</th>
 		<th>전화번호</th>
 		<th>프로필</th>
 	</tr>
 	<%if(actors.isEmpty()){ %>
 		<tr>
 			<td colspan="3">조회된 배우가 없습니다.</td>
 		</tr>
 	<%}else{ 
 		for(Actor a : actors){%>
 		<tr>
 			<td><%=a.getName()%></td>
 			<td><%=a.getPhone()%></td>
 			<td>
 				<img src="<%=request.getContextPath()%>/images/<%=a.getProfile() %>"
 				width="100">
 			</td>
 		</tr>
 		<% }
 		} %>
 </table>