如何将Stimulus控制器的用户输入传递给Ruby控制器以实时更新变量

问题背景 #

我在Home控制器的index方法中定义了变量target = 13.5，通过该变量执行大量计算后将结果传递到index.html视图。需要实现用户输入值直接更新此变量：当用户输入14时，target变为14，控制器重新执行计算并实时展示结果。以下是完整的实现方案：

修改后的代码实现 #

1. Home控制器（home_controller.rb） #

class HomeController < ApplicationController
  def index
    # 优先从URL参数取target，无参数时用默认值13.5
    @target = params[:target] || 13.5
    # 执行计算并把结果赋值给实例变量，供视图使用
    @calculation_result = perform_calculations(@target.to_f)
  end

  def receive
    # 接收用户输入的目标值，转成浮点数
    target = params[:number].to_f
    # 复用计算逻辑得到结果
    calculation_result = perform_calculations(target)
    # 返回JSON格式的目标值和计算结果
    render json: { result: calculation_result, target: target }
  end

  private

  # 封装所有计算逻辑，供index和receive方法复用
  def perform_calculations(target)
    # 替换成你实际的大量计算代码，以下是示例逻辑
    target * 2 + 5
  end
end

关键改动：

• 将target改为实例变量@target，让视图能访问当前值
• 新增私有方法perform_calculations封装计算逻辑，避免代码重复
• index方法支持从URL参数获取target，方便初始化或后续扩展
• receive方法接收用户输入，执行计算后返回结果和目标值

2. 路由配置（routes.rb） #

Rails.application.routes.draw do
  root 'home#index'
  post 'receive', to: 'home#receive'
end

说明：保持原有路由即可，无需额外修改

3. 视图文件（index.html.erb） #

<div class="input-form" data-controller="ajax">
  <%= form_with url: receive_path, data: { ajax_target: 'form', action: 'submit->ajax#send' } do |form| %>
    <%# 输入框默认显示当前的目标值 %>
    <%= form.text_field :number, value: @target %>
    <%= form.submit "更新计算" %>
  <% end %>
  <%# 显示当前目标值和初始计算结果 %>
  <p>当前目标值: <span data-ajax-target="target"><%= @target %></span></p>
  <p>计算结果: <span data-ajax-target="output"><%= @calculation_result %></span></p>
</div>

关键改动：

• 给输入框设置默认值为当前的@target
• 新增data-ajax-target="target"元素，用于实时更新显示的目标值
• 初始页面就展示计算结果，提升用户体验

4. Stimulus控制器（ajax_controller.js） #

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // 新增target目标，用于更新页面上的目标值显示
  static targets = ['form', 'output', 'target']

  connect() {
    console.log('Ajax控制器已连接');
  }

  send(event) {
    event.preventDefault();

    fetch(this.formTarget.action, {
      method: 'POST',
      headers: { 
        "Accept": "application/json",
        // 加上Rails必需的CSRF Token，防止跨站请求伪造
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
      },
      body: new FormData(this.formTarget)
    })
    .then(response => {
      // 处理HTTP请求错误
      if (!response.ok) throw new Error('请求失败，请重试');
      return response.json();
    })
    .then(data => {
      // 更新页面上的目标值和计算结果
      this.targetTarget.textContent = data.target;
      this.outputTarget.textContent = data.result;
      // 把输入框的值同步为新的目标值
      this.formTarget.querySelector('[name="number"]').value = data.target;
    })
    .catch(error => {
      console.error('更新失败:', error);
    });
  }
}

关键改动：

• 新增target目标，用于更新页面上的目标值显示
• 添加X-CSRF-Token请求头，符合Rails的安全要求
• 增加错误处理逻辑，方便调试
• 同步更新输入框的值，确保用户体验一致

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