使用單個AJAX請求同時保存多個記錄？

我正在使用jQuery Sortable在列表之間拖動卡片，如Trello。當用戶完成與卡交互時，我需要將所有卡保存在該列表中。使用單個AJAX請求同時保存多個記錄？

我目前正在做與每個循環，循環在該類型的所有項目，並節省每一個與一個AJAX請求。

ui.item.parent('.js-CardsContainer').children('.js-CardContainer').each(function() { 
    var list_id = $(this).closest('.js-List').data('id'); 
    var order = $(this).index(); 
    var id = $(this).find('.js-Card').data('id'); 

    console.log(order); 

    $.ajax({ 
    url: "/cards/" + id, 
    type: "PATCH", 
    data: { 
     card: { 
     list_id: list_id, 
     order: order 
     } 
    }, 
    success: function(resp) { 
     // 
    } 
    }); 
});

它似乎適用於只有幾張卡片的列表。但是當5張卡被保存時，其中一些失敗。我想這是因爲每個卡都使用單獨的AJAX請求？

所以，我想我需要將所有的AJAX請求合併成一個請求？我不知道該怎麼做。誰能幫忙？

這將我的控制器更新動作看起來像這樣

def update 
    @card = Card.find(params[:id]) 

    if @card.update_attributes(shared_params) 
     respond_to do |format| 
      format.js {} 
      format.json { render json: @card, status: :created, location: @card } 
     end 
    else 
     render :edit 
    end 
end

來源

2017-01-03 colmtuite

你可以改變你的邏輯，這樣你提供data與card對象的數組，像這樣：

var cards = ui.item.parent('.js-CardsContainer .js-CardContainer').map(function() { 
    return { 
     list_id: $(this).closest('.js-List').data('id'), 
     order: $(this).index 
    } 
}).get(); 

$.ajax({ 
    url: "/cards/", 
    type: "PATCH", 
    data: { cards: cards }, 
    success: function(resp){ 
     // 
    } 
});

然後，您只需修改服務器端邏輯即可處理卡片陣列而不是單個實例。

來源

2017-01-03 13:21:54

那麼url會是「/ cards」而不是「/ cards /」+ id？ – colmtuite

是的 - 那會更準確。我更新了答案。 –

謝謝Rory，你知道我怎麼能更新服務器端的邏輯？我正在使用Rails，我已將控制器邏輯添加到該問題中。 – colmtuite

使用單個AJAX請求同時保存多個記錄？

回答

相關問題