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

Question

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

我目前正在使用each 循环来完成此操作，循环遍历该类型的所有项目并使用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 请求合并到一个请求中？但我不知道该怎么做。有人可以帮忙吗？

这将是我的 Controller 更新操作，如下所示

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){
        //
    }
});

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