创建url查询参数并传递给Rails控制器

Question

我的问题涉及将值从JS传递给控制器​​，然后使用它们来查询并返回一些输出数据。这些值是根据在UI选择的结果：

<!-- Select car make --> 
<ul id = "make"> 
    <% Car.all.each do |c| %> 
     <li><%= link_to c.make, todos_data_path(:make_id => c.id), :method => :post, remote: true %></li> 
    <% end %></ul> 

<!-- Select car body --> 
<ul id = "body"> 
    <% Type.all.each do |t| %> 
     <li><%= link_to t.name, todos_data_path(:body_id => t.id), :method => :post, remote: true %></li> 
    <% end %></ul> 

提取在JS所选值：

var make = $('#make').text();  
var body = $('#body').text(); 

搜索后，我从一个post了解到，一个人不能从JS传递变量直接的Rails 。相反，通过将值作为params添加到url中，将值传递给控制器​​。根据我的理解，我需要在三个基本步骤中完成：

第1步：使用JavaScript创建查询字符串参数。 一种方式way做到这一点：

var url = "http://www.myapp/todos/data?" + $.param({make_id: make, body_id: body}) 
//http://www.myapp/todos/data?make_id=4&body_id=3 

步骤2：追加查询字符串的URL。 继较早question一个可以追加查询字符串通过到网址：

window.open(url, "_self"); 

第3步：运行URL字符串，并在控制器中使用PARAMS。

我的路线：

resources : todos, only: [:index, :new, :create , :destroy] 
get '/todos/data (:make_id)(:body_id)' => 'todos#data' 

控制器：

def data 
    @make = params[:make_id] 
    @body = params[:body_id] 

    @vehicles = Vehicle.where(make: @make, body: @body) 

    respond_to do |format| 
     format.html{ redirect_to root_path } 
     format.js { } 
    end 
end 

在URL运行后的字符串输出：

Started GET "/todos/data?make_id=2&body_id=3" for 10.240.0.185 at 2017-05-24 12:55:58 +0000 
Processing by TodosController#data as HTML 
Parameters: {"make_id"=>"2", "body_id"=>"3"} 
Redirected to http://myapp/ 
Completed 302 Found in 4ms (ActiveRecord: 0.6ms) 

似乎一切正常达点那里有redirect_to root_path。因为我的目标是呈现data.js.erb，所以我想执行format.js { }。我怎样才能让行动响应JS格式而不是HTML？我试图在路线get '/todos/data(:make_id)(:body_id)' => 'todos#data', :defaults => { :format => 'js { }' }中指定，但它产生未知的格式错误。

我已经发布了我为了清晰我想要达到的目标而要做的事情的整个过程，并且可能会得到关于如何以不同方式完成整个事情的建议。

编辑： 我也需要展示我todo.js

$(document).on('turbolinks:load', function() { 
    $('#make').on('click', 'li', function (event){ 
     event.preventDefault(); 
     $('.active').removeClass('active'); 
     var text = $(this).text(); 
     $(this).addClass('active'); 
    }); 

    $('#body').on('click', 'li', function (event){ 
     event.preventDefault(); 
     $('.active').removeClass('active'); 
     var text = $(this).text(); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 1

当您要执行window.open(url, "_self");，它被要求作为一个HTML的GET请求。你为什么不使用ajax？

$.ajax({ 
    url: url, 
    method: "GET", 
    dataType: "script", /*optional*/ 
    success: function(response){ 
    console.log(response) 
    } 
}) 

选项2：

$("a").on("click", function(){ 
    $.ajax({ 
     url: "http://www.myapp/todos/data", 
     type: "get", 
     dataType: "script", 
     data: { 
     make_id: make, 
     body_id: body 
     }, 
     success: function(response) { 
     console.log(response); 
     }, 
     error: function(xhr) { 
     //Do Something to handle error 
     } 
    }); 
    return false; 
}) 

在 $("a")的地方

，用你想要的选择。