使用ajax向ruby控制器发送数据

Using ajax to send data to ruby controller

本文关键字:数据 控制器 ruby ajax 使用      更新时间:2024-05-12

我想做的事情:

我正在创建一个ruby on rails应用程序,它有一个播放列表。播放列表属于用户对象,是一个散列。我需要两个关键的按钮。一个用于向哈希中添加新音乐,另一个用于从哈希中删除音乐。我使用javascript来跟踪当前歌曲,无论何时按下添加按钮,都应该通过ajax将其发送回add_song控制器,然后将字符串添加到播放列表哈希中。然而,我坚信我的实现是错误的,因为我一直得到一个500错误。目前我只担心add_song按钮。我们非常感谢您的帮助!

当前错误:岗位http://localhost:3000/adding500(内部服务器错误)

下面是我不引人注目的javascript代码:

var player = new Audio("File1.mp3");
var value = 1 ;
var track = "File.mp3";

function backward() {
         var temp2 = player.src[player.src.length - 5] ;

          if ( temp2 != 1){
                value = parseInt(temp2);
                value  -= 1;
                player.src = "/File"+value+".mp3";
                player.play();
}
}
function forward() {
           var temp2 = player.src[player.src.length - 5] ;
           if ( temp2 != "5")  {
                value = parseInt(temp2);
                value  += 1;
                player.src = "/File"+value + ".mp3";
                player.play();
}
  }
  function play(){
        player.src  = "/File"+value + ".mp3";
         player.play();
} 
  function pause( ) {
         player.pause();
}

 //add button
 //delete button


function get_song() {
 return player.src
}
$(document).ready(function() {
$("div div").click( function(){
 if ( this.id  ==  'play' ) {
        play();
 }else if(this.id == 'backward'){
        backward();
 }else if(this.id == 'forward'){
        forward();
  }else if(this.id == 'stop') {
    pause() ;
  }else if(this.id == 'add_song') {
    $.ajax({
    url: "adding",
    type: "post",
    data: {data_value: JSON.stringify(player.src)}
 });
 }
});
});

下面是我的静态页面控制器

   class StaticPagesController < ApplicationController
  respond_to :js, :json, :html
    def add_song()
           if user_signed_in?
                session[:user_id] = current_user.id
                present_user = User.find(session[:user_id])
                puts present_user
                present_user.playlist.store(params[:data_value], 1)
                present_user.save
                puts "It works"
        else
        end
        end
        def remove_song()
            if user_signed_in?
             session[:user_id] = current_user.id
             present_user = User.find(session[:user_id])
             present_user.playlist.delete(params[:data_value])
             present_user.save
            else
        end
        end


  def home
   end
end

最后下面是我的路线:

 devise_for :users, :controllers => { :sessions => "sessions" , :registrations => "registrations"}
  devise_scope :user do
    get   "/log_in" => "sessions#new" ,as: :new_user_sessions
     post  '/log_in' => "sessions#create" ,as: :user_sessions
    delete "/destroy" => "devise/sessions#destroy", as: :destroy_user
    get   '/edit' => 'devise/registrations#edit'
    get   "/sign_up" => "registrations#new", as: :new_user_registrations
    post  "/sign_up" => "registrations#create", as: :user_registrations
 end
  root 'static_pages#home'
  match '/home', to:'static_pages#home', via: 'get'
  match '/adding',   to: 'static_pages#add_song',   via: 'post'

你需要做这样的事情:

"render json:"之后的内容将作为结果返回给ajax调用。在这种情况下,如果用户保存它,则返回单词"它工作":

def add_song()
 if user_signed_in?
   session[:user_id] = current_user.id
   present_user = User.find(session[:user_id])
   present_user.playlist.store(params[:data_value], 1)
   if present_user.save
     render json: { success: "It works" }
   end
 end
end

现在,在Ajax调用中,我们需要定义回调,以便在成功的情况下处理响应。您还需要在视图中添加一个类(在本例中,该类的id为"result"),并在该元素中呈现您想要显示的响应:…

else if(this.id == 'add_song') {
 $.ajax({
   url: "adding",
   type: "post",
   data: {data_value: JSON.stringify(player.src)},
   success: function(response) {
      $('#result').html(response.success);
   }
 });
}