밥지
8
2019-09-27 20:56:22
2
150

Spring, Ajax, jstl


초보 spring 학습자 입니다.. 제가 탭 부분을 Ajax로 만들려고 합니다. 그런데 controller에서 list 값을 가져와서 다시 화면에 쏴주는 방법을 할 수가 없네요.. 혹시 조언 해주시면 감사하겠습니다!!!

- Ajax 부분

- Controller 부분


- Jsp 부분


0
0
  • 답변 2

  • 훈마로
    378
    2019-09-28 00:41:12

    JavaScript ajax success 함수에서 alert(JSON.stringify(data)은 정상 동작하시나요?

    하신다면 ajax 통신은 잘 된거고요

    JSTL은 AJAX와 별개입니다.

    JSP가 만들어 질 때 모델객체를 통해 뷰리졸버가 바인딩해준 값들을 만들어줄 때 일종의 로직을 수행시켜주는 구문일 뿐입니다.


    ajax로 받아오신 데이터는 Javascript를 통해 DOM객체를 조작해서 데이터를 뿌려주셔야되요.

    0
  • heaves
    5
    2019-09-28 16:53:25

    지금 jsp에서 하신 것과 같이 작업하신 것은 동기방식 즉, Ajax요청이 아니라 기존에 작업하던 방식대로 하시는 거고 Ajax통신은 훈마로님께서 말씀하신대로 Ajax통신 하는 <script>내부에서 조작해서 만져주셔야 합니다.

    뭐 여러 가지 방법이 있겠지만

    간단하게 설명을 드리면 아래와 같이 게시판 탭을 선택해서 요청하는 부분을 Ajax로 통신하였습니다.

    [사내소식]이나 [경조사]탭을 누를때 마다 ajax로 게시판의 내용을 요청해서 가져오도록 샘플을 작성한 것입니다.

    1.  jsp부분에서 ajax결과를 가지고 출력하고 싶은 부분에 id,class를 정의합니다.

        

    위의 예제에 <c:forEach>부분은 처음 페이지를 로딩할때 ajax가 아닌 기존의 방법으로 가져와서 목록을 출력할 것이므로 사용한 것이고 제목과 날짜를 출력하는 부분에 class를 정의하였고 위의 카테고리 부분은 id로 정의하였습니다.

    2. ajax로 통신한다. ajax로 통신한 결과를 가져오는지 꼭 확인을 해보시기 바랍니다.

    3. 다음과 같이 ajax success함수 부분에서 결과를 출려가도록 처리합니다.


    	$(document).ready(function() {
    		//id속성이 boardCategory로 정의된 모든 li에 익명의 함수를 적용하겠다는 의미
    		$("#boardCategory>li").each(function(){
    			$(this).click(function(){
    				//alert("선택됨")
    				//alert($("#boardMain").outerWidth())
    				//alert($("#boardMain").outerHeight())
    				//현재 작업 중인 객체가 click되면 ajax를 요청할 수 있도록 처리
    				category = $(this).text();
    				//alert(category);
    				$("#boardCategory>li").removeAttr("class")
    				$(this).attr("class","active");
    				$.ajax({
    					url:"/kimsaemERP/board/ajax_boardlist.do",
    					type:"get",
    					data:{
    						"category":category	},
    					success:function(data){
    						mydata="";//조회한 json객체안의 모든 데이터를 꺼내서 추가할 변수
    						for(i=0;i<data.length;i++){
    							mydata = mydata +
    							"<tr><td class='boardContent' style=''><a href='/kimsaemERP/board/user/read.do?board_no="+data[i].board_no+"&state=READ'>"
    							+data[i].title+
    							"</a></td><td class='boardDate' style=''>"
    							+data[i].write_date+"</td></tr>"
    						}
    						//alert(mydata);
    						$("#mydatalist").empty();
    						$("#mydatalist").append(mydata);
    					},
    					error:function(a,b,c){//ajax실패시 원인(에러메시지)
    						alert(c);
    					}
    					
    				});
    			})
    		})
    	})
    </script>


    여러 가지 방법이 있지만 참고하셔서 작업하세요

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