Rails 5中表单提交JS无法实现Ajax加载评论问题求助

嘿，折腾了好几个小时还没搞定Ajax加载评论的问题，太让人头疼了！我帮你梳理下几个关键排查点和解决办法，咱们一步步来：

• 检查Gemfile里是否已经添加了gem 'jquery-rails'，并且执行过bundle install；
• 核对app/assets/javascripts/application.js的引入顺序，必须先加载jQuery再加载ujs，正确顺序应该是这样：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

别小看顺序，要是把ujs放在jQuery前面，直接就会导致Ajax功能失效！

你的评论表单必须加上remote: true属性，这样Rails才会用Ajax提交而不是普通的页面跳转，比如：

<%= form_with(model: [joy, joy.comments.build], remote: true) do |form| %>
  <!-- 这里放你的表单字段，比如评论内容输入框 -->
  <%= form.text_area :content %>
  <%= form.submit '提交评论' %>
<% end %>

注意Rails 5里form_with默认就是remote的，但保险起见还是明确写上remote: true更稳妥。

在CommentsController的create动作里，必须添加respond_to处理JS请求，这样才会调用对应的JS模板：

def create
  @joy = Joy.find(params[:joy_id])
  @comment = @joy.comments.build(comment_params)
  @comment.void = 'f' # 确保评论状态符合你的查询条件

  respond_to do |format|
    if @comment.save
      format.js # 会自动加载app/views/comments/create.js.erb
    else
      format.js { render 'error' } # 可选，处理保存失败的情况
    end
  end
end

private
def comment_params
  params.require(:comment).permit(:content) # 根据你的字段调整
end

这一步是把新评论渲染到页面的关键，创建app/views/comments/create.js.erb文件，内容如下：

// 找到当前Joy对应的评论列表容器
const $commentsList = $('#comments-<%= @joy.id %>');
// 渲染新评论的局部视图（假设你有app/views/comments/_comment.html.erb）
const newComment = '<%= j render @comment %>';
// 把新评论追加到列表末尾
$commentsList.append(newComment);
// 可选：清空表单内容
$('#new_comment').find('textarea').val('');

这里的j是escape_javascript的简写，用来转义评论内容里的引号和换行，避免JS语法错误。

Rails 5默认启用Turbolinks，它会导致传统的$(document).ready()只在第一次页面加载时生效，后续页面跳转不会触发。如果你的JS逻辑用了DOM加载事件，要改成绑定turbolinks:load事件：

$(document).on('turbolinks:load', function() {
  // 这里写你的JS逻辑，比如手动绑定表单提交（如果没用到remote:true的话）
});

打开浏览器开发者工具（F12），切换到Console标签页，看看有没有JS报错：

• 如果提示$ is not defined：说明jQuery没加载成功，检查application.js的引入顺序；
• 如果提示找不到元素：检查你的ul的ID是否和JS里的选择器匹配；
• 如果有404/500错误：切换到Network标签页，查看Ajax请求的响应，看看控制器有没有报错。

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