JQuery 기초 응용

1. Ajax이용 댓글 내용 전달

html

<form id="review" action="">
    <input type="hidden" value="" name="br_rate" id="your-rate">
    <input type="hidden" name="b_itemId" value="${book.b_itemId}">
    <input type="hidden" name="m_email" value="${sessionScope.loginUser.m_email}">
    <input type="submit"  class="submit" id="submit">
</form>

자바스크립트

$(function({
   $("#review").submit(function(e){
	e.preventDefault();	// 원래 submit을 했을 때 동기형식으로 넘어간다. 그걸 막아주는 역할, 대신 밑에 있는 로직을 실행함.
	var formData = $(this).serialize();
	$.ajax({
		url:"review.do",
		type:"Post",
		data: formData,
		dataType:"json",
		success: function(result){
			alert("입력성공");
		},
		error: function(result){
			alert("입력실패");
		}
	});
    });
});

컨트롤러

	@ResponseBody
	@PostMapping("review.do")
	public void ajaxReview(BookReview br) {
		log.info(br);
	}

다음과 같이 로그가 찍히는 것을 볼 수 있다.

2. 별점 입력

html

<div class="comment-form-rating">
   <label>Your rating</label>
   <div class="rating">
       <i id="star1" class="far fa-star"></i>
       <i id="star2" class="far fa-star"></i>
       <i id="star3" class="far fa-star"></i>
       <i id="star4" class="far fa-star"></i>
       <i id="star5" class="far fa-star"></i>    
       <input type="hidden" value="" name="br_rate" id="your-rate">                               
   </div>
</div>

자바스크립트(더 좋은 방법을 찾자)

$(function({
    $("#star1").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","far fa-star");
        $("#star3").attr("class","far fa-star");
        $("#star4").attr("class","far fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",1);
    });
    $("#star2").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","fa fa-star");
        $("#star3").attr("class","far fa-star");
        $("#star4").attr("class","far fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",2);
    });
    $("#star3").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","fa fa-star");
        $("#star3").attr("class","fa fa-star");
        $("#star4").attr("class","far fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",3);
    });
    $("#star4").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","fa fa-star");
        $("#star3").attr("class","fa fa-star");
        $("#star4").attr("class","fa fa-star");
        $("#star5").attr("class","far fa-star");
        $("#your-rate").attr("value",4);
    });
    $("#star5").click(function(){
        $("#star1").attr("class","fa fa-star");
        $("#star2").attr("class","fa fa-star");
        $("#star3").attr("class","fa fa-star");
        $("#star4").attr("class","fa fa-star");
        $("#star5").attr("class","fa fa-star");
        $("#your-rate").attr("value",5);
    });
});