눈개
116
2020-10-29 10:36:47 작성 2020-10-29 12:24:05 수정됨
4
242

[ajax] 동적 테이블, 비동기 통신으로 상세보기 질문드립니다 ㅠㅠ


안녕하세요 비동기 통신을 이용해 테이블 상세보기를 구현하려하는데 

제가 아는 키워드로 구글링을 해보아도 명쾌한 해답이 없어 질문드립니다 ㅠㅠ


main.jsp

<table border="1" id="my_table"> 
			<tr> 
				<th> a </th>
				<th> b </th>
				<th> c </th>
				<th> d </th>
				<th> e </th>
				<th> f </th>
			</tr>
			
			<c:forEach var="item" items="${ items }"> 
				<tr>
					<td> ${ number } </td>
					<td> ${ item.id } </td>
					<td> <a class="detail_info" href="#"> 
                                                    ${item.phone_no } </a> </td>
					<td> ${ item.info_3} </td>
					<td> ${ item.info_2 } </td>
					<td> ${ item.get_datetime } </td>
				</tr>
				<c:set var="number" value="${ number + 1 }" />
			</c:forEach>
		</table>

<!-- 상세정보 -->

<div id="detail_board">

<jsp:include page="03_Detail.jsp" />

</div>

위처럼 서블릿에서 ArrayList 객체를 받아 .jsp파일에 동적으로 표시하는 테이블이 있습니다.

해당 테이블의 item.phone_no을 클릭하면 <div>안에 새로운 동적 테이블 생성하여 보여주어야합니다. 


script

<script> 
$("#detail_board").hide();

$("my_table tr").click(function(){ 
var tr = $(this); var td = tr.children(); var phone_no = td.eq(2).text(); $.ajax({ type : 'post', url : '_03_DetailAjax', data : {phone_no : phone_no}, dataType : 'text', success : function(result){ console.log("phone_no = " + phone_no); $("#detail_board").show(); }, error: function(){ alert("error"); } }) }); </script>


ajax로 호출한 서블릿 페이지

public class _03_DetailAjax extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { reqPro(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { reqPro(request, response); } protected void reqPro(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String phone_no = request.getParameter("phone_no"); ItemDAO itemDAO = itemDAO.getInstance(); ArrayList<itemDTO> detailItemBoard = itemDAO.getDetailItem(phone_no); request.setAttribute("detailItemBoard ", detailItemBoard );
RequestDispatcher dis = request.getRequestDispatcher("view/03_Detail.jsp");
dis.forward(request, response); } }


로직은 item.phone_no클릭  ajax호출 → 서블릿 페이지에서 ArrayList 객체 생성 

해당데이터를 03_Detail.jsp에 뿌려줌 → 성공시  <div> 보여주기 입니다.


text는 잘 만들어서 비동기 통신후 보여주기까지 성공하는데 ajax가 json만 지원하기 때문인지

ajax로 호출한 서블릿에서 ArrayList의 객체를 만들수 없습니다 ㅠㅠ

Json이나 .append()를 사용하기엔 데이터양이 많고 추후 코드 수정이 어려울것같아

더 나은 방법을 찾아보고있는데 해답이 잘 나오지 않네요 


비동기 통신을 통해 테이블을 만들어야 하는경우 선배님들은 어떤식으로 문제를 해결하셨는지요 ㅠㅠ?

힌트라도 주신다면 감사히 공부하겠습니다!

긴글 읽어주셔서 감사합니다ㅠㅠ!

0
  • 답변 4

  • kiroki
    772
    2020-10-29 11:32:30

    1. detailItemBoard를 리퀘스트에 set 한다음에 리다이렉트 해야 view/03_Detail.jsp에서 사용할 수 있을 것 같습니다.

    2. view/03_Detail.jsp에서 html을 만들어서 브라우저에 념겨주고

    3. ajax 성공 콜백에서 받은 html을 표시하려는 Element에 넣어주면 될 것 같네요

    기타. dataType : 'text'이거는 없어야 하는지 확신은 없네요

  • 눈개
    116
    2020-10-29 12:31:04

    kiroki  님 답변갑사합니다!

    1. 제가 질문을 올리면서 코드상에서 삭제된것같네요! 수정하였습니다!

    이 방법으로 detailItemBoard를 넘기려고하니  ajax로 호출한 페이지에서 메서드 호출만 될뿐 객체가 생성되지않더군요 ㅠㅠ (java.lang.IndexOutOfBoundsException)

    2.3 시도해보겠습니다! 감사합니다 ㅠㅠ

  • 빨간오이
    141
    2020-10-29 13:05:39

    <jsp:include ... 요 태그 필요없어요. 이건 server 단에서 html 전체페이지 만들때 동작하는 거지 ajax 동작하고 상관없어요.

    ajax success handler 에서 div 보여주기 동작만 하고 있는데  이렇게 하면 안되요.

    ajax response content 를 innetHTML 같은 걸로 div 태그에 넣어줘야 됩니다.

    jquey 가물가물해서 검색해봤는데 아래 코드를 handler 에 추가해보세요.

    서블릿 내에서 발생하는 오류는 별도로 해결해야 합니다.

    $("#detail_board").html(result)
  • 눈개
    116
    2020-10-29 14:56:39

    빨간오이 넵 ㅠㅠ 그런것같아서 <jsp:include>는 삭제하였습니다 ㅠㅠ

    코드 참고하겠습니다 ㅠㅠㅠ감사합니다!


  • 로그인을 하시면 답변을 등록할 수 있습니다.