spring jquery ajax 예제

스크립트

<script>
    $(document).on('click','#btn1',function(){  //버튼클릭시이벤트
        $.ajax({ //jquery ajax
            url:'/oneSelectRental', //비동기통신할 주소
            type:'get',   //데이터전송방식
            data:$('form').serialize(), //form 태그 안의 데이터 전송
            dataType : "json", //서버측에서 전송한 데이터 해석할 타입
            success:function(data){ //통신 성공시 실행되는 함수 data는 서버측에서 전송한 데이터
                console.log('success');                                
                $('#bookName').text(data.book.bookName);
                $('#memberId').text(data.memberId);
                $('#rentalStartDay').text(data.rentalStartDay);
                $('#returnExpectDay').text(data.returnExpectDay);
                $('#returnDay').text(data.returnDay);
                $('#returnStatus').text(data.returnStatus);
                $('#rentalPrice').text(data.rentalPrice);
                $('#result1').css("display","");
            }
        });
    });
</script>

pom.xml 

dependency에 json형식으로 변환시켜주는 라이브러리인 jackson을 추가

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.8.5</version>
</dependency>

controller 에서 객체를 json형식으로 변환해 리턴

//하나의 대여정보 대여코드로 조회
@RequestMapping(value = "oneSelectRental", method = RequestMethod.GET)
public @ResponseBody Rental oneSelectRental(Model model, //리턴타입 앞에 @ResponseBody애노테이션을 달면 리턴객체를json형식으로변환해리턴
        @RequestParam(value = "rentalCode") int rentalCode){
    logger.debug("oneSelectRental");
    logger.debug(rentalCode+"");
    Rental rental = libService.oneSelectRental(rentalCode);
    return rental;
}

jquery 에서 each문 사용

<script>
    $(document).on('click','#btn1',function(){
        $.ajax({
            url:'/booksearch',
            type:'post',
            data:$('form').serialize(),
            dataType : "json",
            success:function(data){
                console.log('success');
                var list = data
                $("#result1").css("display","");
                    
                $.each(list, function(i) {
                    console.log(list[i]);
                    $("#searchList").append("<tr>");
                    $("#searchList").append("<td>" + list[i].bookName + "</td>");
                    $("#searchList").append("<td>" + list[i].writer + "</td>");
                    $("#searchList").append("<td>" + list[i].publisher + "</td>");
                    $("#searchList").append("<td>" + list[i].category + "</td>");
                    $("#searchList").append("<td>" + list[i].genre + "</td>");
                    $("#searchList").append("<td>" + list[i].lib.libName + "</td>");
                    $("#searchList").append("<td>" + list[i].bookLocation + "</td>");
                    $("#searchList").append("<td>" + list[i].currentStatus + "</td>");
                    $("#searchList").append("</tr>");
                   });     
            }
        });
    });
</script>