Jquery/Ajax related query for like and dislike button

Question

In my application, I have some user reviews and guest users can view them and choose to like/or dislike them. Part of the current code in jsp is shown below.

<div class="row mtop20">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <p class="info">
                        Was this review helpful? <i class=" fa fa-thumbs-up" id="${review.id}"></i>
                        Yes <i class=" fa fa-thumbs-down" id="${review.id}"></i> No <br>
                        <div id="vote_already_${review.id}" style="display: none;">Your have already voted.</div>                                           
                        <div id="vote_recorded_${review.id}" style="display: none;">Thanks for your vote!</div>
                        <c:choose>
                            <c:when test="${empty review.helpfulReviewCounter}">
                                    <c:set var="helpfulReviewCounter" value="0"></c:set>
                            </c:when>
                            <c:otherwise>
                                    <c:set var="helpfulReviewCounter"
                                                    value="${review.helpfulReviewCounter}"></c:set>
                            </c:otherwise>
                        </c:choose> 
                        <c:choose>
                            <c:when test="${empty review.notHelpfulReviewCounter}">
                                <c:set var="notHelpfulReviewCounter" value="0"></c:set>
                            </c:when>
                            <c:otherwise>
                                <c:set var="notHelpfulReviewCounter"
                                                    value="${review.notHelpfulReviewCounter}"></c:set>
                            </c:otherwise>
                        </c:choose>
                        <c:set var="totalReviewsCounter"
                                            value="${helpfulReviewCounter + notHelpfulReviewCounter}"></c:set>
                        <span>${helpfulReviewCounter} of
                                            ${totalReviewsCounter} users found this review helpful</span>
                    </p>

             </div>
 </div>

I am not that good with jQuery and Ajax. I want to call a javascript/jQuery/Ajax method on click on "Like" button (class fa-thumbs-up) which will call the back-end code and if the back-end code results in success then updates helpfulReviewCounter and totalReviewsCounter for the given review.

My technology stack is spring mvc, hibernate, jQuery, ajax, html5, css3.

Thanks for your assistance in advance.

Answer 1

I can't help you with your server-side code without more information, but this JS will hopefully help:

<script>
$(function() {
  $('.fa-thumbs-up').on('click', function() {
    $.post('/api/like', {id: this.id});
  });

  $('.fa-thumbs-down').on('click', function() {
    $.post('/api/dislike', {id: this.id});
  });
});
</script>

Obviously change the API paths to suit your backend.