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

Posted 2023-05-08

【中文标题】使用 ajax 和 rails 将多个参数保存在单个数组中

【英文标题】：Saving multiple params in a single array with ajax and rails

【发布时间】：2017-12-12 10:54:10

【问题描述】：

当一张卡片被拖入列表时，我使用jQueryUI sortable 插件的update 回调将每张卡片的新位置发送到我的控制器。此 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"]

然后，我将在我的控制器操作中更新每个受影响卡的 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

视图如下所示：

<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 请求中的数组中？

【问题讨论】：

你能暴露 DOM 吗？

我的意思是展示你的观点

你可以在datahash中传递list_id

会晚点讨论，我现在很忙，我会尽量解决你的问题

<%= link_to card, class: 'js-Card', :data => :id => card.id,list_id:list.id , remote: true do %> <span><%= card.title %></span> <% end %> 试试这个让我

【参考方案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');
                
            );
        
    
);

在您的控制器排序操作中，您需要遵循此代码

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

希望对你有帮助

【参考方案2】：

抱歉，我迟到了回复。要基于@uzaif 的答案，您还可以像这样在数据哈希本身内设置键值对：

 var data = $(this).sortable('serialize'), list_id: $(this).attr("data-list-id")

就像@uzaif 所说，确保调整您的控制器以接受参数哈希中的 list_id。

【参考方案3】：

正如我在上一条评论中提到的，在排序等事件（以及在其他 jquery UI 事件中，如可拖动）上发送的至少一个对象通常包含对前一个元素的引用。

在这种情况下，ui 对象包含一个发送者数组，该数组将在索引 0 处包含对最近发送者的引用：ui.sender[0]

我在这里举了一个例子来说明如何在你的情况下使用它：

http://jsfiddle.net/6npx24uf/

【讨论】：

谢谢米克。实际上，我在将该变量与我的 AJAX 请求中的其他数据组合时遇到了麻烦，然后在我的 rails 控制器操作中传递了该数据。我已经有了我需要的变量。不过感谢您的指点，我可以将该事件数据用于其他用途。