創建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")的地方

，用你想要的選擇。