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

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

我的方法是获取每个列表项的列表ID，列ID和索引位置。 我想将其包装到一个对象中，该对象可以作为参数传递回Rails控制器以保存到数据库中。 理想情况下，我希望像这样格式化参数： Parameters: {"Activity"=>[{id:1,column:2,position:1},{id:2,column:2,position:2} ,...]}

如何正确格式化我在此Ajax POST请求中传递的参数？ 现在，通过以下方法，我传递Parameters: {"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。

Answer 1

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

 $.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) } 

或者更紧凑（如果你喜欢那种东西）：

 update: (event, ui) -> neworder = [ ] $('[id*="day"] > li').each -> index = ui.item.index() + 1 neworder.push( id: $("##{column} li:nth-child(#{index})").attr('id') column: @id index: index ) $.ajax url: "sort" type: "POST" data: { Activity: JSON.stringify(neworder) } 

然后你可以JSON.parse(params[:Activity])在你的控制器中解压缩它。

---

在评论中进行了一些讨论之后，我认为您的index值是错误的。 这样做：

 index = ui.item.index() + 1 

将为每个

提供相同的index 。 你可能想要更像这样的东西：

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

这应该为您提供迭代的

集合中当前

（ @ ）的索引。 或者，您可以使用each传递给迭代器函数的参数：

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

Answer 2

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

 jQuery -> $('[id*="day"]').sortable( connectWith: ".day" placeholder: "ui-state-highlight" update: (event, ui) -> neworder = new Array() $(this).children().each -> column = $(this).parent().attr("id").match(/\d+/)[0] id = $(this).attr("id").match(/\d+/)[0] neworder.push( id: id column: column ) alert neworder $.ajax url: "sort" type: "POST" data: { Activity: JSON.stringify(neworder) } ).disableSelection() 

我如何将AJAX调用解析回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' 

非常感谢你的帮助@muistooshort