Question

我最近制作了一个投票系统，每次用户点击帖子的投票按钮时都会有较高的投票率，同时还有一个跟踪用户投票数量的计数器。投票按钮仅刷新HTML的那一部分，因此没有整个页面刷新投票计数数字更改，但投票金额的计数器不会更改，除非刷新整个页面。我如何才能使它们在点击投票按钮时只刷新它们的一部分？只是不知道从哪里开始。谢谢！

HTML for Vote

<div class='Counter'>
<span class='CounterNum'><span id='<%= micropost.id%>'><%=micropost.votes_for %></span></span>
<div class='<%=micropost.id %>'>
<a href="/microposts/<%=micropost.id %>/vote_up" data-remote='true' class='CounterButton b2'>
<span id="CounterIcon" class="<%=micropost.id%>"></span>
</a>
</div>
</div>

投票金额的HTML

<li class='fst'><a class='ProfileLikes' href="/"><%=@user.vote_count(:up) %><span class='ProfileStatText'>Likes</span></a></li>

Vote_up.Js

$("#<%=@micropost.id%>").html('<%="#{@micropost.votes_for}"%>');
$(".<%=@micropost.id%>").html('<a href="/microposts/<%=@micropost.id%>/unvote" data-remote="true" class="SquekCounterButton b3 <%=@micropost.id%>"><span id="SquekCounterIcon" class="<%=@micropost.id%>"></span></a>');

Answer 1

可以在此处查看AJAX请求的jQuery API指南：http://api.jquery.com/jQuery.ajax/

那里有很多信息，所以我会给你一些代码来帮助你入门：

 $(document).ready(function(){
      $('a.CounterButton').click(function(event){
           event.preventDefault(); //This will prevent the link from navigating

           $.ajax({
                url: $(this).attr('href'), //This pulls the URL from the HREF of the link
                dataType: 'json', //This tells the AJAX request we're expecting JSON 
                success: function(response){
                     console.log(response); //Output the response to console
                     //Maybe something like:
                     $('#' + response.ID ).text(response.Likes);
                },
                error: function(jqXHR, textStatus, errorThrown){
                     alert('An error occured!');
                }
           )};
      });
 });

Rails：按钮单击时部分刷新

1 个答案: