我如何進行Ajax調用？

Question

我正在爲學習rails的個人項目工作。它是一個任務管理應用程序，任務已經說明，正在進行並完成。經過多天的修改之後，我得到了trello，就像在任務狀態之間工作的拖放功能一樣，但它不會改變狀態。

這裏是我的javascript代碼，

var ready; 
var id = $(this).attr("task_id"); 
ready = function(){ 
    // call sortable on our div with the sortable class 
    $('#sortable1').sortable({ 
     connectWith: ".connected", 
     dropOnEmpty: true 
    }); 
    $('#sortable2').sortable({ 
     connectWith: ".connected", 
     dropOnEmpty: true 
    }); 
    $('#sortable3').sortable({ 
     connectWith: ".connected", 
     dropOnEmpty: true 
    }); 
}; 

$(document).ready(ready); 
/** 
* if using turbolinks 
*/ 
$(document).on('page:load', ready); 

所以，現在當我將它從sortable1掉落物品（這是「做」），以sortable2（這是「進行中」）或sortable3（這是「完成」），我希望它撥打電話，以改變路線

resources :tasks do 
    member do 
     put :change 
    end 
    end 

，改變基於存在params狀態，

def change 
    @task.update_attributes(state: params[:state]) 
    respond_to do |format| 
     format.html { redirect_to tasks_path, notice: 'Task updated' } 
    end 
end 

我是新來的一般的JavaScript和AJAX。關於它應該如何工作的詳細描述，我能做些什麼來更好地解決這個問題，通過鏈接到相應的主題以獲得更好的理解將會有所幫助。

這是我的觀點

<%= link_to 'New Task', new_task_path, class: "btn btn-primary" %> 
<br> 
<br> 
<div class="row"> 
    <div class="col-lg-4 tasks"> 
    <h2 class="text-xs-center">Todo</h2> 
    <ul id="sortable1" class="connected sortable list droptrue" state="to_do"> 
    <% @to_do.each do |task| %> 
    <li draggable="true"> 
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning' %>" style="max-width: 20rem;" task-id="<%= task.id %>"> 
     <div class="card-header action-box"> 
     <div class="text-xs-left"> 
      <strong><%= link_to task.title, edit_task_path(task)%></strong> 
     </div> 
      <div class="btn btn-secondary btn-sm"> 
      <i class="fa fa-play-circle" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 
    </li> 
    <%end%> 
    </ul> 
    </div> 

    <div class="col-lg-4 tasks"> 
    <h2 class="text-xs-center">In Progress</h2> 
    <ul id="sortable2" class="connected sortable list droptrue" state="in_progress"> 
    <% @in_progress.each do |task| %> 
    <li draggable="true"> 
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning' %>" style="max-width: 20rem;" task-id="<%= task.id %>"> 
     <div class="card-header action-box"> 
     <div class="text-xs-left"> 
      <strong><%= link_to task.title, edit_task_path(task)%></strong> 
     </div> 
      <div class="btn btn-secondary btn-sm"> 
      <i class="fa fa-play-circle" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 
    </li> 
    <%end%> 
    </ul> 
    </div> 


    <div class="col-lg-4 tasks"> 
    <h2 class="text-xs-center">Done</h2> 
    <div> 
    <ul id="sortable3" class="connected sortable list droptrue" state="done"> 
    <% @done.each do |task| %> 
    <li draggable="true"> 
    <div class="<%= task.state == 'to_do' ? 'card card-outline-info' : task.state == 'in_progress' ? 'card card-outline-success' : 'card card-outline-warning' %>" style="max-width: 20rem;" task-id="<%= task.id %>"> 
     <div class="card-header action-box"> 
     <div class="text-xs-left"> 
      <strong><%= link_to task.title, edit_task_path(task)%></strong> 
     </div> 
      <div class="btn btn-secondary btn-sm"> 
      <i class="fa fa-play-circle" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 
    </li> 
    <%end%> 

    </ul> 
    </div> 
</div> 

sortable1有 「狀態= 'to_do'」 屬性，sortable2有 「狀態= 'IN_PROGRESS'」 和 「狀態= '做'」。我甚至沒有100％知道爲什麼我添加了狀態屬性，只是想，也許它會幫助，而Ajax調用哈哈。

Answer 1

您需要在放置物品時發送ajax/xhr請求。下面是一個示例（在CoffeeScript中）類似於被記錄在http://guides.rubyonrails.org/working_with_javascript_in_rails.html

$.ajax(url: "/change").done (html) -> 
    $("#results").append html