創建URL查詢參數並傳遞給Rails控制器

Question

我的問題涉及將值從JS傳遞到控制器，然后使用它們查詢並返回一些輸出數據。 這些值是用戶界面中選擇的結果：

<!-- 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();  

搜索后 ，我從一篇帖子中了解到，不能將變量從JS直接傳遞給Rails。 而是通過將值作為參數附加到url中來將值傳遞給控制器​​。 據我了解，我可以通過三個基本步驟來完成：

步驟1：使用JavaScript創建查詢字符串參數。 一種方式方法來做到這一點：

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。 遵循先前的問題，可以通過以下方式將查詢字符串附加到url：

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的地步。 我希望改為執行format.js { }因為我的目的是渲染data.js.erb 。 如何使動作響應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") ，使用所需的選擇器。