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

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

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

1 个答案: