[Web] ajax으로 받아온 data를 jstl로 표현하기

안녕하세요. 글쓰는 개발자입니다.

 

오늘은 ajax으로 받아온 data를 jstl로 표현하는 방법에 대해 소개하고자 합니다. ajax의 POST방식을 사용하게 되면, error가 발생하면서 받아온 값을 jstl로 표현하지 못하는데요. 이유는 다음과 같습니다.

서버는 JAVA>JSTL>HTML>Javascript 순서로 동작하는데 GET방식으로 페이지 이동시 바로 model.addAttribute하는 경우에만 작동하는 것을 많이 경험하셨을 겁니다.

 

그러나, 저는 업무 중에 Tab메뉴를 동작할 때 마다 Ajax Post 방식으로 data를 받아와야했고 append를 하기에는 View단의 코드가 너무 길어지고 퍼블리싱 변경이라도 발생할 경우, 유지보수에 상당한 어려움이 예상되었습니다.

 

그리하여, 고민한 결과 아래 그림과 같이 Ajax으로 불러온 data가 필요한 부분을 따로 jsp파일로 만들어 놓고 Ajax 동작이후 해당 페이지의 특정 영역을 그대로 불러오는 것입니다.

---

1. Ajax을 통해 Controller - Service - Mapper결과를 받아옴

2. 받아온 결과를 indexListAjax.jsp에 뿌려주고 jstl로 받음

3. indexListAjax.jsp의 <div id="indexListAajx"></div> 영역을 index.jsp의 <div id="tabl1"></div>에 전달.

 

Ajax으로 불러온 data를 jstl로 표현하는 방법 모식도

 

---

구현코드 예제

1. JAVASCRIPT

function list(tab){ 
	var formData = new FormData(); //formData 객체 생성
	formData.append("tab", tab);
	$.ajax({
		url : "/list",
		type : "post",
		dataType : "text",
		data : formData,
		contentType: false,
	    processData: false,
		cache : false
    }).done(function(result) {
		  console.log("결과확인");
     		var html = jQuery('<div>').html(result);
			var contents = html.find("div#indexListAjax").html();
			if(tab == "ing"){
				$("#tabl1").html(contents);
			}else if(tab == "end"){
				$("#tabl2").html(contents);
			}			
		
	}).fail(function (jqXHR, textStatus, errorThrown) {
		console.log("에러");
		console.log(jqXHR);
		console.log(textStatus);
		console.log(errorThrown);
	});
}

 

2. JAVA - Controller

@PostMapping("/list")
  public String getListInstutNotice(@ModelAttribute("VO") VO param, Model model) {
  
      List<ResultMap> list = new ArrayList<>();
      list = service.selectList(param);        
      model.addAttribute("list", list);
      
    return "/test/url";
  }

 

3. indexListAjax.jsp

<div id="indexListAjax">
	<c:forEach items="${list }" var="item" varStatus="status">
    	<div class="wrap">
          <div>${item.test1 }</div>
          <div>${item.test2 }</div>
          <div>${item.test3 }</div>
          <div>${item.test4 }</div>
        </div>
    </c:forEach>
</div>

 

4. index.jsp

<div id="tabl1"></div>
<div id="tabl2"></div>

 

5. Ajax동작 후 index.jsp

<div id="tabl1">
	<div class="wrap">
      <div>${item.test1 }</div>
      <div>${item.test2 }</div>
      <div>${item.test3 }</div>
      <div>${item.test4 }</div>
    </div>
    <div class="wrap">
      <div>${item.test1 }</div>
      <div>${item.test2 }</div>
      <div>${item.test3 }</div>
      <div>${item.test4 }</div>
    </div>
    <div class="wrap">
      <div>${item.test1 }</div>
      <div>${item.test2 }</div>
      <div>${item.test3 }</div>
      <div>${item.test4 }</div>
    </div>
</div>
<div id="tabl2"></div>