如何在Rails的link_to路径中传递HTML元素的输入值？

解决方案 #

嘿，这个问题我熟！因为game_answer_path(@game)是服务器渲染页面时生成的静态URL，没法直接嵌入前端输入框的动态值——毕竟服务器渲染时还不知道用户会输入啥对吧？给你两种靠谱的解决方案，看你偏好哪种：

方法一：用JavaScript拦截点击，动态构造请求URL #

这种方法适合不想修改现有HTML结构的场景，核心思路是阻止链接的默认跳转，获取输入值后构造带参数的URL再发送AJAX请求：

1. 先给你的链接加个ID，方便JS定位：

%input#answer{type: "text", required: true} 
%p = link_to "Send", game_answer_path(@game), class: 'btn btn-default', remote: true, id: 'submit-answer-btn'

2. 编写JavaScript代码处理点击事件（可以放在项目的JS文件里，比如app/assets/javascripts/game.js）：

document.getElementById('submit-answer-btn').addEventListener('click', function(e) {
  // 阻止链接的默认跳转行为
  e.preventDefault();
  
  // 获取输入框的值
  const answerValue = document.getElementById('answer').value;
  if (!answerValue) return; // 空值的话可以提前拦截，符合required要求
  
  // 构造带参数的请求URL
  const baseUrl = this.href;
  const url = new URL(baseUrl);
  // 把answer作为查询参数加到URL里，服务器端可以通过params[:answer]获取
  url.searchParams.set('answer', answerValue);
  
  // 发送AJAX请求，注意带上Rails需要的CSRF令牌
  fetch(url, {
    method: 'POST', // 这里要对应你路由里的请求方法，比如POST/PUT
    headers: {
      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
      'Accept': 'text/javascript' // 匹配remote: true期望的响应格式
    }
  })
  .then(response => response.text())
  .then(data => {
    // 这里可以处理服务器返回的响应，比如更新页面内容
    // 如果用Rails UJS，也可以触发对应的ajax:success事件
    Rails.fire(document, 'ajax:success', [data]);
  })
  .catch(error => console.error('提交失败:', error));
});

方法二：改成Rails表单（更推荐） #

这种方法更符合Rails的开发习惯，表单会自动帮你处理参数传递、CSRF令牌和AJAX提交，不用手动写太多JS：

把你的输入框和按钮改成表单结构：

= form_tag game_answer_path(@game), method: :post, remote: true do
  %input#answer{type: "text", name: "answer", required: true} 
  %p = submit_tag "Send", class: 'btn btn-default'

这样用户点击"Send"按钮时，表单会自动把输入框的answer参数通过AJAX提交到服务器，你在控制器里直接用params[:answer]就能拿到值，完全不用额外写JS处理参数传递。

服务器端获取参数的示例 #

不管用哪种方法，你都可以在对应的控制器action里获取参数：

# 假设是AnswersController的create action
def create
  @game = Game.find(params[:game_id])
  user_answer = params[:answer]
  
  # 这里写你的业务逻辑，比如验证答案、保存记录等
  
  # 响应AJAX请求（对应remote: true）
  respond_to do |format|
    format.js # 会渲染app/views/answers/create.js.erb文件
  end
end

内容的提问来源于stack exchange，提问作者Val-Lee