在Rails中通过AJAX渲染关注/取消关注按钮遇阻求助

嘿，我来帮你排查下AJAX实现关注/取消关注时遇到的问题！这种功能在Rails里挺常见的，咱们一步步来捋：

• 首先要确保你的关注/取消关注按钮加了remote: true属性——这是Rails触发AJAX请求的核心开关。比如你的_follow_button.html.erb应该是类似这样：

  <div id="follow-btn-container-<%= user.id %>">
    <% if current_user.following?(user) %>
      <%= button_to '取消关注', relationship_path(user.id), method: :delete, remote: true, class: 'btn btn-danger' %>
    <% else %>
      <%= button_to '关注', relationships_path(followed_id: user.id), method: :post, remote: true, class: 'btn btn-primary' %>
    <% end %>
  </div>
  

• 检查app/assets/javascripts/application.js里有没有引入Rails UJS，必须要有这一行：

  //= require rails-ujs
  

  没有它的话，remote: true根本不会生效。

你的Relationships控制器的create和destroy动作，必须明确支持JS响应，不然AJAX请求会找不到对应的处理模板：

class RelationshipsController < ApplicationController
  def create
    @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js # 这行会自动去找app/views/relationships/create.js.erb
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js # 对应app/views/relationships/destroy.js.erb
    end
  end
end

这一步是实现无刷新更新的关键，你需要在app/views/relationships文件夹下创建create.js.erb和destroy.js.erb两个文件：

• create.js.erb（关注成功后更新按钮）：

  // 替换按钮容器里的内容
  $('#follow-btn-container-<%= @user.id %>').html('<%= j button_to "取消关注", relationship_path(@user), method: :delete, remote: true, class: "btn btn-danger" %>');
  // 可选：如果页面有显示关注数的元素，顺便更新它
  $('#follower-count-<%= @user.id %>').text('<%= @user.followers.count %>');
  

• destroy.js.erb（取消关注后更新按钮）：

  $('#follow-btn-container-<%= @user.id %>').html('<%= j button_to "关注", relationships_path(followed_id: @user.id), method: :post, remote: true, class: "btn btn-primary" %>');
  $('#follower-count-<%= @user.id %>').text('<%= @user.followers.count %>');
  

这里的j是escape_javascript的简写，用来转义ERB生成的HTML代码，避免JS语法错误。

打开浏览器开发者工具（F12），切到Network标签，点击关注/取消关注按钮：

• 如果没有任何JS请求发送：检查remote: true是否加对、rails-ujs是否正确引入，再看Console标签有没有JS报错；
• 如果请求返回404：检查routes.rb里的关系路由是否正确，比如应该有resources :relationships, only: [:create, :destroy]；
• 如果请求返回500：检查控制器里的参数是否正确（比如params[:followed_id]是否能拿到值），或者follow/unfollow方法有没有逻辑错误。

如果你之前加alert没反应，大概率是AJAX请求根本没触发，或者JS模板没被正确渲染。可以先在create.js.erb里加一句alert('关注成功！');，如果点击按钮后弹出提示，说明AJAX流程是通的，问题出在DOM更新的代码上；如果没弹出，就回到前面的步骤排查基础配置。

内容的提问来源于stack exchange，提问作者donkihot5