Question

我有一个Ruby on Rails项目，其中包含模型User和模型Content等。我希望用户能够“喜欢”某个内容，并且我已经使用acts_as_votable gem完成了这项工作。

目前，喜欢系统正在运行，但每次按下喜欢按钮（link_to）时我都会刷新页面。

我想使用Ajax这样做，以便更新按钮和喜欢的计数器，而无需刷新页面。

在我的Content -> Show视图中，这就是我所拥有的：

<% if user_signed_in? %>
  <% if current_user.liked? @content %>
      <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put %>
  <% else %>
      <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put %>
  <% end %>
  <span> · </span>
<% end %>

<%= @content.get_likes.size %> users like this
<br>

Content控制器这样做喜欢/不喜欢：

def like
    @content = Content.find(params[:id])
    @content.liked_by current_user
    redirect_to @content
end

def dislike
    @content = Content.find(params[:id])
    @content.disliked_by current_user
    redirect_to @content
end

在我的routes.rb文件中，这就是我所拥有的：

resources :contents do
    member do
        put "like", to: "contents#like"
        put "dislike", to: "contents#dislike"
    end
end

正如我所说，喜欢系统工作正常，但在用户按下之后不会更新喜欢的计数器或类似按钮。相反，为了欺骗它，我在控制器动作中调用redirect_to @content。

如何通过简单的Ajax调用实现这一点？还有其他办法吗？

Answer 1

你可以通过各种方式这样做，简单的方法如下：

制剂

在application.js中包含Rails UJS和jQuery（如果尚未这样做）：
```
//= require jquery
//= require jquery_ujs
```

将remote: true添加到link_to助手：

<%= link_to "Like", '...', class: 'vote', method: :put, remote: true %>

让控制器回答AJAX请求的非重定向：

def like
  @content = Content.find(params[:id])
  @content.liked_by current_user

  if request.xhr?
    head :ok
  else
    redirect_to @content
  end
end

高级行为

你可能想要更新＆＃34; n用户喜欢这个＆＃34;显示。要实现这一目标，请按以下步骤操作：

为您的计数器值添加句柄，以便稍后使用JS：
找到它
```
<span class="votes-count" data-id="<%= @content.id %>">
  <%= @content.get_likes.size %>
</span>
users like this
```
请注意使用data-id，而不是id。如果经常使用此代码段，我会将其重构为辅助方法。
让控制器回答计数而不仅仅是＆＃34; OK＆＃34; （加上一些信息来查找页面上的计数器;键是任意的）：
```
#…
if request.xhr?
  render json: { count: @content.get_likes.size, id: params[:id] }
else
#…
```

构建一个JS（我更喜欢CoffeeScript）来对AJAX请求做出反应：

# Rails creates this event, when the link_to(remote: true)
# successfully executes
$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  # the `data` parameter is the decoded JSON object
  $(".votes-count[data-id=#{data.id}]").text data.count
  return

我们再次使用data-id属性，仅更新受影响的计数器。

在状态之间切换

动态更改＆＃34;类似＆＃34;的链接到＆＃34;不喜欢＆＃34;反之亦然，您需要进行以下修改：

修改您的观点：

<% if current_user.liked? @content %>
  <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } %>
<% else %>
  <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } %>
<% end %>

再次：这应该是一个辅助方法（例如vote_link current_user, @content）。

和你的CoffeeScript：

$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  # update counter
  $(".votes-count[data-id=#{data.id}]").text data.count

  # toggle links
  $("a.vote[data-id=#{data.id}]").each ->
    $a = $(this)
    href = $a.attr 'href'
    text = $a.text()
    $a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href')
    $a.data('toggle-text', text).data 'toggle-href', href
    return

  return

就像Ruby on Rails中的按钮Ajax一样

1 个答案:

制剂

高级行为

在状态之间切换