使用 Ajax/Javascript 增加 Rails 模型列

Posted 2023-02-25

【中文标题】使用 Ajax/Javascript 增加 Rails 模型列

【英文标题】：Increment Rails model column with Ajax/Javascript

【发布时间】：2015-09-06 17:01:43

【问题描述】：

我在 Rails 音乐应用程序中为 tracks 模型增加整数列 (plays) 时遇到问题。用户可以使用如下按钮在应用中播放曲目：

<% @top_tracks.each do |track| %>
  <button class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>
  ...
  [info about the track, such as <%= track.title %>]
  ...
<% end %>

以下是相应javascript的相关部分：

var player = document.getElementById('audio');

window.playTrack = function (track) 
    player.setAttribute('src', track.file_url);
    player.play();
;

我已经阅读了一些类似问题的答案，例如 this one，这些问题建议使用 Ajax/Javascript，但我不确定如何做到这一点才能获得我想要的结果。我什至不知道 Ajax/Javascript 是否是实现我正在寻找的最佳方式。

应该发生的是，每次播放曲目并调用 playTrack() 函数时，该曲目的 plays 列的值应该增加 1，然后（显然）@987654328 的新值@ 应该保存在数据库中。

【参考方案1】：

在您的每个曲目按钮中添加一个data attribute，例如data-track

<% @top_tracks.each do |track| %>
  <button data-track="#track.id" class="track-play track-<%= track.id %>-play" onclick="playTrack(<%= track.to_json %>)">
    <i class="icon-play"></i>
  </button>

<% end %>

在你的 routes.rb 中声明：

post '/update_track_info', as: 'update_track_info', to: 'tracks#update_track_info'

创建一个ajax请求：

window.playTrack = function (track) 
    player.setAttribute('src', track.file_url);
    player.play();
    $.ajax(
      url: '/update_track_info',
      data:  track_id: $(this).data('track').val() ,
      type: 'POST'
    ) 

;

然后在控制器动作上：

def update_track_info
 @track = Track.find(params[:track_id].to_i)
 @track.update_column(:plays, @track.plays.next)    
 render :nothing => true
end

【讨论】：

你能告诉我如何将ajax请求中的url连接到控制器中的方法吗？

我收到 400（错误请求）错误。看起来它无法识别 url 中的 rails 路径，因为与错误关联的 GET url 是：http://localhost:3000/%3C%=%20update_track_info_path()%20%%3E?track_id=14

你把控制器动作放在哪里了？应该写在tracks_controller.rb文件中。

控制器动作在tracks_controller.rb文件中。正如我上一条评论所指出的那样，ajax 传入的 url 似乎没有正确通过

get '/update_track_info', as: 'update_track_info', to: 'tracks#update_track_info'