使用单个AJAX请求同时保存多个记录？

Question

我正在使用jQuery Sortable在列表之间拖动卡片，如Trello。当用户完成与卡交互时，我需要将所有卡保存在该列表中。

我目前正在做与每个循环，循环在该类型的所有项目，并节省每一个与一个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 

Answer 1

你可以改变你的逻辑，这样你提供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){ 
     // 
    } 
}); 

然后，您只需修改服务器端逻辑即可处理卡片阵列而不是单个实例。