通过单个 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 请求合并为一个请求？我不知道该怎么做。有人可以帮忙吗？

这将执行我的控制器更新操作，如下所示

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

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

通过单个 AJAX 请求同时保存多条记录？

Save Multiple Records Simultaneously with a single AJAX request?

javascript

jquery

ruby-on-rails

ruby-on-rails-5