将数据从 Ajax 传递到 Rails 控制器答案

【问题标题】：Passing data from Ajax to Rails controller将数据从 Ajax 传递到 Rails 控制器
【发布时间】：2014-11-20 03:22:37
【问题描述】：

我的 rails 应用程序有点问题。我正在尝试从数组中提取一个随机名称并将其传递到我的 rails 控制器和方法中。

这是我的 AJAX：

var artists = [array with some names]
randomA = {}

var randomArtist = artists[Math.floor(Math.random()*artists.length)];

randomA['a_name'] = randomArtist.toString();

$.ajax({
    url: "/songs_echowrap/" + randomA.a_name,
    dataType: "json"
    }).success(function(data) { 
        Do Stuff   
    }


    });  
});

这是我的路线：

get 'songs_echowrap/:artist_name' => 'users#get_echonest'

这是我的控制器：

def get_echonest 

    foo = params[:artist_name]

    @rec = Echowrap.playlist_basic(:artist => params[:artist_name] , :results => 25)

    render json: @rec

end

当我在终端中运行 binding.pry 时，参数为“未定义”。

【问题讨论】：

你在浏览器中测试过这个吗？你为什么得到？在开发工具中查看请求参数。在控制器操作中提高参数哈希以查看参数是否包含艺术家姓名。
@Mohamad 是的，我已经完成了一个 console.log(randomA.a_name) 并且它确实返回了我想要的随机艺术家的名字。但我认为它没有正确到达控制器。在终端中，当我运行 binding.pry 时，'foo' 等于 "undefined"
Not console.log() 检查 Rails 请求。在控制器操作中引发错误并检查开发工具以查看请求响应中引发的参数哈希。您将确切地看到 params 包含的内容。如果这是你的 JavaScript 或其他东西，那么你不会。

标签： ruby-on-rails ruby ajax

【解决方案1】：

在 ajax 中这样做，

$.ajax({
  type: "GET",
  url: "/songs_echowrap?artist_name=" + randomA.a_name,
  datavalue: 'html',
  }).success(function(data) { 
    Do Stuff 
  }
 });
});

在路线中，

get 'songs_echowrap' => 'users#get_echonest'

在控制器中，

def get_echonest
  foo = params[:artist_name]
  @rec = Echowrap.playlist_basic(:artist => params[:artist_name] , :results => 25)
  render json: @rec
end

【讨论】：

【解决方案2】：

在您的 ajax 调用中，您应该指定方法（在这种情况下，看起来像 GET）和所需的数据：

$.ajax({
  type: "GET", 
  url: "/songs_echowrap/" + randomA.a_name,
  data: randomA.a_name,
  }).success(function(data) { 
    Do Stuff   
}
});  
});

【讨论】：

哦，我以为我误读了你的答案。即使我把它放回去，我的控制器中的参数仍然是未定义的。
在我建议的解决方案中，params[:data] 得到了什么？
params[:data] 返回 nil

【解决方案3】：

试试这个：对您的代码进行小改动，它可以在您的 ajax call 中添加 data 变量，如下所示：

var artists = [array with some names]
randomA = {}

var randomArtist = artists[Math.floor(Math.random()*artists.length)];

randomA['a_name'] = randomArtist.toString();

$.ajax({
    url: "/songs_echowrap/" + randomA.a_name,
    dataType: "json",
    data: {artist_name: randomA.a_name }
    }).success(function(data) { 
        Do Stuff   
    }


    });  
});

【讨论】：

【解决方案4】：

抱歉，我对 Javascript 比较陌生，我应该更清楚我的代码。

我意识到我的一个变量在错误的范围内，所以它一直以未定义的形式返回。我正在发出两个 AJAX 请求，我认为我可以从第一个返回值并将其传递给第二个。这个问题帮助我理解了我的问题：How do I return the response from an asynchronous call?

这是我现在的 javascript：

$('span').on('click', function(){
    $('#s_title').empty();
    $("#playlist_title").empty();
    $("#viito_list").empty();

    var p_title = $(this).html();
    $("#playlist_title").append(p_title);

    var id = $(this).data("id");
    var artistsList = []

    $.ajax({
        url: "/songs/"+id,
        dataType: "json",
        success: successCallback
    })

    function successCallback(data){
        for(var i = 0; i < data.length; i++){
                function msToTime(duration) {
                    var seconds = parseInt((duration/1000)%60),
                        minutes = parseInt((duration/(1000*60))%60)
                    minutes = (minutes < 10) ? "0" + minutes : minutes;
                    seconds = (seconds < 10) ? "0" + seconds : seconds;

                    return minutes + ":" + seconds ;
                }

            artistsList.push(data[i].artists[0].name);

            $("#s_title").append("<tr> <td>" + data[i].name + "</td>" + "<td>" + data[i].artists[0].name + "</td>" + "<td>" + msToTime(data[i].duration_ms) + "</td>" + "<td><span class='glyphicon glyphicon-remove song-select'></span>" + "</td> </tr>")
        }

        randomArtist = artistsList[Math.floor(Math.random()*artistsList.length)];
        getWeird(randomArtist)
    }


    function getWeird(rando){

        $.ajax({
        type: "GET",
        url: "/songs_echowrap?artist_name=" + rando,
        dataType: "json"
                }).success(function(data) {
                  $("viito_list").empty();

                  for(var i = 0; i < data.length; i++){

                    $("#viito_list").append("<tr> <td>" + data[i].title + "</td>" + "<td>" + data[i].artist_name + "</td> </tr>")
                  }


                });
    }


});

【讨论】：