javascript - 使用ajax和rails将多个参数保存在单个数组中

Question

当卡片被拖动到列表中时，我使用jQueryUI可排序插件的update回调将每张卡片的新位置发送到我的 Controller 。此 AJAX 请求将每张卡的 position 属性发布到拖动的卡被释放到的列表中。

$(".js-Sortable").sortable({
    connectWith: ".js-Sortable",
    items: ".js-CardContainer",
    update: function( event, ui ) {
        if (this === ui.item.parent()[0]) {

            var data = $(this).sortable('serialize');

            $.ajax({
                url: "/c/sort",
                type: "POST",
                dataType: "script",
                data: data,
                success: function(resp){
                    console.log('Yay');
                }
            });
        }
    }
});

这发送的参数看起来像这样

Parameters: {"card"=>["39", "2", "1", "6", "40", "5", "18", "3", "16", "7", "17", "8", "15", "9", "10", "11", "12", "13", "14", "4"]}

然后，我在 Controller 操作中更新每个受影响卡的 position 属性，如下所示:

def sort
    params[:card].each_with_index do |id, index|
        card = Card.find(id)
        card.update_attribute(:position, index) if card
    end

    head :ok
end

View 如下所示:

<ul class="js-CardsContainer js-Sortable">
  <% list.cards.order(:position).where(archived: false).each do |card| %>
    <li class="js-CardContainer" id="card-<%= card.id %>">
      <%= link_to card, class: 'js-Card', :data => { :id => card.id }, remote: true do %>
        <span><%= card.title %></span>
      <% end %>
    </li>
  <% end %>
</ul>

到目前为止，这一切都有效。问题是，卡片可以在不同的列表之间移动。因此，我需要以某种方式获取所拖动的卡发布到的列表的 id 并将其与 AJAX 请求一起发布。

我可以将 list_id 作为变量获取，但是如何将此 list_id 添加到 AJAX 请求中的数组中？

Answer 1

根据您的问题，您正在获取 cards_id 并且您希望将 list_id 与其一起传递

在你的 DOM 中你需要先添加 list_id

<%= link_to card, class: 'js-Card', :data => { :id => card.id }, remote: true,"data-list-id":list.id do %>
        <span><%= card.title %></span> <% end %>

现在您需要在事件处理程序中获取此列表 ID 并将其与您的 cards_id 参数结合起来

$(".js-Sortable").sortable({
    connectWith: ".js-Sortable",
    items: ".js-CardContainer",
    update: function( event, ui ) {
        if (this === ui.item.parent()[0]) {
            var data = {}
            var data['cards_id'] = $(this).sortable('serialize');
            var data['list_id'] = $(this).attr("data-list-id")
            $.ajax({
                url: "/c/sort",
                type: "POST",
                dataType: "script",
                data: data,
                success: function(resp){
                    console.log('Yay');
                }
            });
        }
    }
});

在 Controller 排序操作中，您需要遵循此代码

params[:card].each_with_index do |id, index, list_id| 
card = Card.find(id) 
card.update(:position => index, 
:list_id => params[:ListId]) 
end

希望对你有帮助