对Rails控制器的Ajax POST请求的格式化参数-用于jQuery UI可排序列表

我正在使用jQuery UI可排序的连接列表。我正在将连接列表的顺序保存到Rails服务器

我的方法是获取每个列表项的列表ID、列ID和索引位置。然后我想将其包装成一个对象，该对象可以作为参数传递回Rails控制器以保存到数据库中。因此，理想情况下，我希望将参数的格式设置为：

参数：{“Activity”=>[{id:1，column:2，position:1}，{id:2，column:2，position:2}，…]}

如何正确格式化要在这个Ajax POST请求中传递的参数？ 现在，使用下面的方法，我正在传递

参数：{“undefined”=>“}

这是我当前的jQuery代码（Coffeescript），它不起作用：

jQuery ->
  $('[id*="day"]').sortable(
    connectWith: ".day"
    placeholder: "ui-state-highlight"
    update: (event, ui) ->
      neworder = new Array()
      $('[id*="day"] > li').each ->
        column = $(this).attr("id")
        index = ui.item.index() + 1
        id = $("#" + column + " li:nth-child(" + index + ") ").attr('id')
        passObject={}
        passObject.id = id
        passObject.column = column
        passObject.index = index
        neworder.push(passObject)
      alert neworder
      $.ajax
        url: "sort"
        type: "POST"
        data: neworder
    ).disableSelection()

---

我很抱歉，因为这似乎是一个非常业余的问题，但我刚刚开始编写jQuery和Javascript。

假设您所有的选择器都是正确的，那么您应该能够做到这一点：

$.ajax
  url: "sort"
  type: "POST"
  data: { Activity: JSON.stringify(neworder) }

---

您还可以简化其余代码：

update: (event, ui) ->
  neworder = [ ]
  $('[id*="day"] > li').each ->
    # 'this' should be the DOM element so just read off the 'id' attribute,
    # you don't need to waste time building a jQuery object just to get an
    # 'id' attribute.
    column = @id
    index  = ui.item.index() + 1

    # String interpolation to skip the string addition noise. You already
    # have a jQuery object here so there's nothing wrong with using
    # attr('id') here.
    id = $("##{column} li:nth-child(#{index})").attr('id')

    # You don't need 'passObject' here, just use an object literal and push
    # it onto neworder all in one go.
    neworder.push(
      id:     id
      column: column
      index:  index
    )
  $.ajax
    url: "sort"
    type: "POST"
    data: { Activity: JSON.stringify(neworder) }

或者更紧凑（如果你喜欢这类东西）：

然后您可以

JSON.parse（params[：Activity]）

在控制器中解包

---

在评论中经过一点讨论后，我认为您的

索引

值是错误的。这样做：

index = ui.item.index() + 1

将为每个

提供相同的

索引。你可能想要更像这样的东西：

$lis = $('[id*="day"] > li')
$lis.each ->
  index = $lis.index(@)
  #...

这将为您提供迭代的
集合中当前
（
@
）的索引。或者，您可以使用传递给迭代器函数的参数：

$('[id*="day"] > li').each (index, el) ->
  # Just use `index` as-is in here...

这是我的jQuery代码（在Coffeescript中）：

如何解析对Rails控制器的AJAX调用：

def sort
    JSON.parse(params[:Activity]).each_with_index do |x, index|
      idx = x["id"]
      positionx = index+1
      column = x["column"]
      activity = Activity.find(idx)
      activity.update_attributes(:position => positionx, :day_id => column)
    end
    render nothing: true
  end

回到我的模型中，我按照“活动”关联的位置排序

has_many :activities, :order => 'position'

非常感谢您的帮助@muistooshort
谢谢您的全面回答！我会试试这个，然后回来报到@HungLuu：很抱歉，我忘了我有一堆本地包装器，可以通过JSonification和de JSonification自动处理所有这些东西。请看一下我的变化，我搞不懂。似乎使用此方法会给我一个嵌套哈希。参数：{“活动”=>{“0”=>{“id”=>“活动67”，“列”=>“日期48”，“索引”=>“3”}，“1”=>{“id”=>“活动67”，“列”=>“日期48”，“索引”=>“3”}，“2”=>{“id”=>“活动67”，“列”=>“日期48”，“索引”=>“3”=>{“id”=>“活动67”，“列”=>“日期49”，“索引”=>“3”}有什么想法吗？@mu太短了，如果我更新了所有内容，而不是你可能看不到的两个地方，可能会有所帮助，对不起。如果你在CoffeeScript中使用
data:{Activity:JSON.stringify（neworder）}
，然后使用
JSON.parse（params[：Activity]）
在您的控制器中，它应该可以工作。您还可以使用Rails为您解包。
def sort
    JSON.parse(params[:Activity]).each_with_index do |x, index|
      idx = x["id"]
      positionx = index+1
      column = x["column"]
      activity = Activity.find(idx)
      activity.update_attributes(:position => positionx, :day_id => column)
    end
    render nothing: true
  end

has_many :activities, :order => 'position'