Ajax) text/html 처리

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

HTML

text.jsp

<h2>csv</h2>
<input type="button" value="Celeb 불러오기" id="btn-celeb" />
<input type="button" value="Celeb html 불러오기" id="btn-celeb-html" />

<table id="tbl-celeb">
    <thead>
        <tr>
            <th>No</th>
            <th>이름</th>
            <th>프로필</th>
            <th>구분</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<script>
document.querySelector("#btn-celeb-html").addEventListener('click', (e) => {
    $.ajax({
        url : '<%= request.getContextPath() %>/celeb/html',
        method : 'GET',
        success(html) {
            console.log(html);
            document.querySelector("#tbl-celeb tbody").innerHTML = html;
        },
        error(jqxhr, statusText, err) {
            console.log(jaxhr, statusText, err);
        }
    });
});

 

CelebHtmlServlet

@WebServlet("/celeb/html")
public class CelebHtmlServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1. 사용자 입력값
		
		// 2. 업무로직
		List<Celeb> celebList = CelebManager.getInstance().getCelebList();
		
		// 3. 응답처리 html
		request.setAttribute("celebList", celebList);
		request.getRequestDispatcher("/WEB-INF/views/jquery/html/celeb.jsp").forward(request, response);
	}
}

 

celeb.jsp

<%@page import="com.ce.ajax.celeb.model.dto.CelebType"%>
<%@page import="java.util.List"%>
<%@page import="com.ce.ajax.celeb.model.dto.Celeb"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	List<Celeb> celebList = (List<Celeb>) request.getAttribute("celebList");
	
	for(Celeb celeb : celebList) {
%>
		<tr>
			<td><%=celeb.getNo() %></td>
			<td><%= celeb.getName() %></td>
			<td>
				<img src="<%= request.getContextPath() %>/images/<%= celeb.getProfile() %>" alt="" />
			</td>
			<td>
				<select>
					<option value="<%= CelebType.ACTOR %>" <%= celeb.getType() == CelebType.ACTOR ? "selected" : "" %>>연기자</option>
					<option value="<%= CelebType.MUSICIAN %>" <%= celeb.getType() == CelebType.MUSICIAN ? "selected" : "" %>>음악가</option>
					<option value="<%= CelebType.ENTERTAINER %>" <%= celeb.getType() == CelebType.ENTERTAINER ? "selected" : "" %>>예능인</option>
					<option value="<%= CelebType.MODEL %>" <%= celeb.getType() == CelebType.MODEL ? "selected" : "" %>>모델</option>
					<option value="<%= CelebType.COMEDIAN %>" <%= celeb.getType() == CelebType.COMEDIAN ? "selected" : "" %>>개그맨</option>
				</select>
			</td>
		</tr>
<% 
	}
%>