如何用原生JavaScript的Ajax更新Rails HTML表格（无需jQuery）

看起来你已经搞定了数据保存的Ajax逻辑，就差最后一步更新表格啦！下面是具体的修改方案，全程用原生JS实现，不用依赖jQuery：

1. 后端修改：让save_my_play返回渲染好的表格局部视图 #

我们需要让控制器在保存数据后，把最新的表格HTML返回给前端。修改你的plays_controller.rb里的save_my_play方法：

def save_my_play
  # 你的现有代码（获取游戏图片、保存Play数据）...
  @game = Game.last
  array_images = Array.new()
  @game.images.each do |image|
    array_images.push(url_for(image))
  end

  countdown = params[:countdown]
  play = Play.new
  play.current_time = countdown
  play.image_url = array_images.index(array_images.sample)
  play.save

  @plays = Play.all

  # 新增：渲染_table局部视图，返回纯HTML（不带布局）
  render partial: 'table', locals: { plays: @plays }, layout: false
end

2. 前端修改：Ajax成功后替换表格内容 #

更新你的savegame.js.erb，在请求成功时用返回的HTML替换现有表格容器的内容，同时别忘了加上Rails要求的CSRF令牌（避免请求被拦截）：

function saveMyGame() {
  var countdown = document.getElementById("countdown").innerHTML;
  // 获取页面中的CSRF令牌（Rails默认会在head里生成这个meta标签）
  var csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/plays/save_my_play');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  // 把CSRF令牌加到请求头里，确保请求合法
  xhr.setRequestHeader('X-CSRF-Token', csrfToken);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 用返回的新表格HTML替换#plays容器里的内容
      document.getElementById('plays').innerHTML = xhr.responseText;
      alert('Play saved successfully!'); // 可选：成功提示
    } else {
      alert('Request failed. Returned status of ' + xhr.status);
    }
  };

  // 处理网络错误的情况
  xhr.onerror = function() {
    alert('Network error occurred while saving your play.');
  };
  
  xhr.send(encodeURI('countdown=' + countdown));
}

3. 优化局部视图：使用传入的变量而非直接查询数据库 #

修改你的_table.html.erb，把硬编码的Play.all.each改成使用控制器传入的plays变量（更符合Rails最佳实践，也更灵活），同时修正一下标签闭合错误（原来的<th>用了</td>闭合）：

<table class="table">
  <thead>
    <tr>
      <th scope="col">Tick</th>
      <th scope="col">Index of image in the array</th>
    </tr>
  </thead>
  <tbody>
    <% plays.each do |play| %>
    <tr>
      <td><%= play.current_time %></td>
      <td><%= play.image_url %></td>
    </tr>
    <% end %>
  </tbody>
</table>

4. 确认路由配置 #

确保你的config/routes.rb里有save_my_play的POST路由：

post '/plays/save_my_play', to: 'plays#save_my_play'

这样一来，当你点击"Save play"按钮时，Ajax会把数据提交到后端保存，后端返回最新的表格HTML，前端再把旧表格替换掉，全程不需要刷新页面～

内容的提问来源于stack exchange，提问作者Bruno Lopes Bacelar