Question

在我的应用程序中，我有一些用户评论，访客用户可以查看它们并选择喜欢/不喜欢它们。 jsp中当前代码的一部分如下所示。

<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>

我对jQuery和Ajax不太好。我想在点击＆＃34; Like＆＃34;上调用javascript / jQuery / Ajax方法。按钮（类fa-thumbs-up）将调用后端代码，如果后端代码成功，则更新给定评论的helpfulReviewCounter和totalReviewsCounter。

我的技术堆栈是spring mvc，hibernate，jQuery，ajax，html5，css3。

感谢您的帮助。

Answer 1

我无法在没有更多信息的情况下帮助您使用服务器端代码，但是这个JS有望提供帮助：

<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>

显然更改API路径以适合您的后端。

对于喜欢和不喜欢按钮的Jquery / Ajax相关查询

1 个答案: