Spring Ajax를 사용한 정렬

ajax를 사용하여 컨트롤러(sortPrice.do)로 필요한 정보를 넘겨주고 result로 결과값을 받아와 상품을 새로 만들어 주었다.

<script type="text/javascript">
	function sortPrice(){
						      
		var sortPrice = $("#sortPrice").val();
		console.log("정렬 [" + sortPrice + "]");
		$.ajax({   
			type : "post",
			url : "sortPrice.do",
			data :  {
				"pdetail": sortPrice
			},
			success : function(result) {
			console.log(result);
			$('.figure').remove();
										
				for(var n of result){
											
				var item = "<div class='col-lg-4 col-md-6 col-sm-6 figure'>";

					item += "<div class='product__item'>";
					item += "<div class='product__item__pic set-bg'>";
					item += "<img alt='이미지' src='"+n.pimg+"'>";
					item += "<ul class='product__hover'>";
					item +=	"<li><a href='favorite.jsp'><img src='img/icon/heart.png' alt=''></a></li>";
					item += "<li><a href='boardP.do?pid="+n.pid+"'><img src='img/icon/search.png' alt=''></a></li>";
					item += "</ul>";
					item += "</div>";
					item += "<div class='product__item__text'>";
					item += "<h6>"+n.pname+"</h6>";
					item += "<h5>"+n.price+"원</h5>";
					item += "</div>";
					item += "</div>";
					item += "</div>";
											
					$('#figures').append(item);
				}
										
			},
			error : function(request, status, error) { // 순서 체크해보기!
					console.log("상태코드: " + request.status);
					console.log("메세지: " + request.responseText);
					console.log("에러설명: " + error);
			}
		});
	}
</script>

 

sortPrice.do 컨트롤러

스프링에서 주소가 아닌 값을 넘겨줄려면 @ResponseBody 어노테이션이 필요하다.

	@ResponseBody
	@RequestMapping(value="/sortPrice.do")
	public List<ProductVO> sortPrice(ProductVO pVO, Model model) {
		
		List<ProductVO> products=productService.selectAllProduct(pVO);
		
		return products;
		
	}

 

기존 화면

 

정렬 이후의 화면

 

낮은 금액순

 

높은 금액순