Ruby on Rails实现AJAX请求并渲染模型结果局部视图

嘿，作为Ruby/Rails新手碰到AJAX相关的问题真的太正常了，我来一步步帮你搞定这个需求！

第一步：确认路由设置 #

首先确保你的config/routes.rb里配置了Attribute的资源路由，这样才能生成create动作的请求路径：

resources :attributes
resources :products

第二步：修改AttributesController的create动作 #

我们需要让create动作能响应AJAX请求，处理完属性创建后返回JS格式的响应：

class AttributesController < ApplicationController
  def create
    @attribute = Attribute.new(attribute_params)
    @attribute.save # 这里直接执行保存，后续在JS模板里判断是否成功

    # 必须添加这一行，告诉控制器要响应JS格式的请求
    respond_to :js
  end

  private
  def attribute_params
    params.require(:attribute).permit(:name)
  end
end

第三步：在products/new.html.erb里添加AJAX表单 #

在产品新建页面中，添加一个远程表单（通过remote: true开启AJAX提交），用来创建属性，同时准备好存放渲染结果的容器：

<!-- 用来展示新增属性的容器 -->
<div id="attributes-list"></div>

<!-- AJAX提交的属性表单 -->
<%= form_with(model: Attribute.new, remote: true, class: "add-attribute-form") do |f| %>
  <%= f.text_field :name, placeholder: "输入属性名称" %>
  <%= f.submit "添加属性" %>
<% end %>

小提示：Rails 5+的form_with默认就是远程提交，但显式写上remote: true更直观；如果是Rails 4及之前版本，要用form_for并加上remote: true。

第四步：创建AJAX响应的JS模板 #

在app/views/attributes/目录下新建create.js.erb文件，这个文件会在属性创建后执行，负责把局部视图插入到页面中：

// 判断属性是否保存成功
<% if @attribute.persisted? %>
  // 渲染局部视图并添加到容器里，j是escape_javascript的简写，避免JS语法错误
  $("#attributes-list").append("<%= j render partial: 'attributes/attribute', locals: { attribute: @attribute } %>");
  // 可选：清空表单输入框，提升用户体验
  $(".add-attribute-form input[name='attribute[name]']").val("");
<% else %>
  // 处理保存失败的情况，比如弹出错误提示
  alert("属性创建失败：<%= j @attribute.errors.full_messages.join(', ') %>");
<% end %>

第五步：编写属性的局部视图 #

在app/views/attributes/目录下新建_attribute.html.erb局部视图，用来展示单个属性的内容：

<div class="attribute-item">
  <span><%= attribute.name %></span>
</div>

新手容易踩的坑 #

• 确保jQuery已正确引入：Rails 6+用Webpack的话，需要先安装jquery并在application.js里导入；Rails 5及之前的Asset Pipeline，要在app/assets/javascripts/application.js里加上//= require jquery。
• 别忘了控制器里的respond_to :js，这是让控制器返回JS响应的核心配置。
• 局部视图的命名和路径要对应：下划线开头的文件，渲染时写partial: 'attributes/attribute'即可。

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