如何用Rails的link_to标签通过AJAX构建关联记录实现订单添加商品

我来帮你一步步捋清楚这个功能的实现流程，从模型关联、路由配置到前端渲染全环节覆盖：

1. 先确认模型关联（假设基于Rails框架） #

首先确保你的数据模型之间有正确的关联关系，示例如下：

# app/models/order.rb
class Order < ApplicationRecord
  has_many :line_items, dependent: :destroy
end

# app/models/product.rb
class Product < ApplicationRecord
  has_many :line_items
  # 假设用常量定义商品可选尺寸
  SIZES = %w[XS S M L XL]
end

# app/models/line_item.rb
class LineItem < ApplicationRecord
  belongs_to :order
  belongs_to :product

  # 计算订单项小计
  def subtotal
    product.price * quantity
  end
end

2. 配置嵌套路由 #

给订单项配置嵌套路由，确保它关联到具体的订单：

# config/routes.rb
Rails.application.routes.draw do
  resources :orders do
    resources :line_items, only: [:create, :destroy] # 顺便支持订单项删除
  end
  # 其他业务路由...
end

3. 构建AJAX表单（推荐用form_with） #

在你的订单详情页（比如orders/show.html.erb）中，添加订单项容器和添加商品的表单：

<!-- 已添加的订单项展示容器 -->
<div id="line-items-container">
  <%= render @order.line_items %> <!-- 先渲染已有订单项 -->
</div>

<!-- 添加商品的AJAX表单 -->
<div id="add-item-form">
  <%= form_with model: [@order, LineItem.new], remote: true do |form| %>
    <div class="form-group">
      <%= form.label :product_id, "选择商品" %>
      <%= form.collection_select :product_id, Product.all, :id, :name, prompt: "请选择商品" %>
    </div>
    <div class="form-group">
      <%= form.label :size, "选择尺寸" %>
      <%= form.collection_select :size, Product::SIZES, :to_s, :humanize, prompt: "请选择尺寸" %>
    </div>
    <div class="form-group">
      <%= form.label :quantity, "数量" %>
      <%= form.number_field :quantity, min: 1, value: 1, class: "form-control" %>
    </div>
    <%= form.submit "添加到订单", class: "btn btn-primary" %>
  <% end %>
</div>

如果一定要用link_to替代表单，需要用JS动态获取输入值（因为link_to参数默认是静态的），示例代码如下：

<!-- 输入控件 -->
<select id="product-select">
  <% Product.all.each do |p| %>
    <option value="<%= p.id %>"><%= p.name %></option>
  <% end %>
</select>
<select id="size-select">
  <% Product::SIZES.each do |s| %>
    <option value="<%= s %>"><%= s.humanize %></option>
  <% end %>
</select>
<input type="number" id="quantity-input" min="1" value="1">

<!-- 添加按钮 -->
<%= link_to "添加到订单", "#", id: "add-item-btn", class: "btn btn-primary" %>

<script>
document.getElementById('add-item-btn').addEventListener('click', function(e) {
  e.preventDefault();
  const productId = document.getElementById('product-select').value;
  const size = document.getElementById('size-select').value;
  const quantity = document.getElementById('quantity-input').value;

  // 发送AJAX POST请求
  fetch('<%= order_line_items_path(@order) %>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': '<%= form_authenticity_token %>'
    },
    body: JSON.stringify({
      line_item: { product_id: productId, size: size, quantity: quantity }
    })
  })
  .then(response => response.text())
  .then(data => {
    // 追加新订单项到页面
    document.getElementById('line-items-container').insertAdjacentHTML('beforeend', data);
    // 重置数量输入框
    document.getElementById('quantity-input').value = 1;
  })
  .catch(error => console.error('添加失败:', error));
});
</script>

不过更推荐用form_with，它会自动处理CSRF令牌和AJAX逻辑，省去手动写JS的麻烦。

4. 控制器处理业务逻辑 #

在LineItemsController中实现create动作，处理AJAX请求：

# app/controllers/line_items_controller.rb
class LineItemsController < ApplicationController
  before_action :set_order

  def create
    # 查找订单中是否已有同商品同尺寸的项，存在则累加数量，不存在则新建
    @line_item = @order.line_items.find_or_initialize_by(
      product_id: line_item_params[:product_id],
      size: line_item_params[:size]
    )
    @line_item.quantity += line_item_params[:quantity].to_i

    respond_to do |format|
      if @line_item.save
        format.html { redirect_to @order, notice: '商品已添加到订单' }
        format.js # 自动渲染app/views/line_items/create.js.erb
      else
        format.html { render 'orders/show' }
        format.js { render :error } # 渲染错误处理脚本
      end
    end
  end

  private

  def set_order
    @order = Order.find(params[:order_id])
  end

  def line_item_params
    params.require(:line_item).permit(:product_id, :size, :quantity)
  end
end

5. AJAX响应与页面动态更新 #

创建create.js.erb处理成功后的页面渲染：

# app/views/line_items/create.js.erb
// 追加新订单项到容器
$("#line-items-container").append("<%= j render @line_item %>");
// 清空添加表单
$("#add-item-form form")[0].reset();
// 显示成功提示
$("#line-items-container").prepend('<div class="alert alert-success">商品已成功添加！</div>');
// 3秒后自动隐藏提示
setTimeout(() => { $(".alert-success").fadeOut(); }, 3000);

创建订单项的局部视图_line_item.html.erb：

# app/views/line_items/_line_item.html.erb
<div class="line-item card mb-2 p-3">
  <div class="d-flex justify-content-between align-items-center">
    <div>
      <h6><%= line_item.product.name %></h6>
      <p class="mb-0">尺寸: <%= line_item.size %> | 数量: <%= line_item.quantity %></p>
    </div>
    <div>
      <span class="h5"><%= number_to_currency line_item.subtotal %></span>
      <%= link_to "删除", order_line_item_path(@order, line_item), 
                  method: :delete, remote: true, 
                  class: "btn btn-sm btn-danger ms-2" %>
    </div>
  </div>
</div>

如果需要处理错误场景，创建error.js.erb：

# app/views/line_items/error.js.erb
// 显示错误提示
$("#add-item-form").prepend('<div class="alert alert-danger"><%= j @line_item.errors.full_messages.join(", ") %></div>');
setTimeout(() => { $(".alert-danger").fadeOut(); }, 5000);

可选优化：动态加载商品尺寸 #

如果不同商品有专属的可选尺寸，可以在用户选择商品后，用AJAX动态更新尺寸下拉框：

# 给商品下拉框添加ID
<%= form.collection_select :product_id, Product.all, :id, :name, prompt: "请选择商品", id: "product-select" %>

# 对应的JS（可放在application.js或页面内）
$("#product-select").change(function() {
  const productId = $(this).val();
  if (productId) {
    fetch(`/products/${productId}/sizes`)
      .then(response => response.json())
      .then(sizes => {
        $("#size-select").empty();
        sizes.forEach(size => {
          $("#size-select").append(`<option value="${size}">${size.humanize()}</option>`);
        });
      });
  }
});

然后在ProductsController中添加sizes动作返回JSON：

def sizes
  @product = Product.find(params[:id])
  render json: @product.sizes # 假设Product有sizes属性存储可选尺寸
end

路由中补充：

resources :products do
  get :sizes, on: :member
end

这样整个流程就完整了，用户点击添加按钮后，AJAX请求会创建/更新订单项，页面无需整页刷新就能动态显示新的内容~

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