RoR、Ajax、可排序、序列化答案

【问题标题】：RoR, Ajax, Sortable, SeralizeRoR、Ajax、可排序、序列化
【发布时间】：2011-12-05 23:45:59
【问题描述】：

我只是有一点'duh'的时刻，但我有一个菜单项列表，我可以排序并使用 jquery ui 的序列化方法对数据进行序列化。我正在提交 ajax 请求并在 webrick 中看到以下参数：

参数：{ "sort" => "menu[]=2&menu[]=3&menu[]=1&menu[]=4" }

最终，我只想拥有2,3,1,4 的列表并编写一个 sql 查询来更新这些项目的 sort_order。到目前为止，我发现的大多数教程都只有 PHP 服务器端示例，人们只是去params['sort']['menu']，它返回2,3,1,4，但在 Ruby 中似乎返回一个空对象。

这是我的 jquery 代码：

$(document).ready(function() {
  $(".sortable").sortable({
    update : function (){ 
      $.ajax({
        type  : "POST",
        url   : "/page_parts/sort/",
        data  : {
          sort : $(".sortable").sortable('serialize')
        }
      }); 
    }   
  }); 
});

这是我的标记：

<ul class="sortable">
  <% @page_parts.each do |f| %>
    <li id="menu_<%= f.id %>"><%= f.title %></li>
  <% end %>
</ul>

这是我的控制器代码：

def sort
  raise params['sort']['menu'].inspect
end

这将返回：

Started POST "/page_parts/sort/" for 127.0.0.1 at 2011-10-12 06:19:38 -0400
  Processing by PagePartsController#sort as */*
  Parameters: {"sort"=>"menu[]=1&menu[]=2&menu[]=4&menu[]=3&menu[]=5"}
Completed 500 Internal Server Error in 0ms

RuntimeError ("menu"):
  app/controllers/page_parts_controller.rb:9:in `sort'

另一方面，如果我尝试：

def sort
  raise params['sort'].inspect
end

我明白了：

Started POST "/page_parts/sort/" for 127.0.0.1 at 2011-10-12 06:19:10 -0400
  Processing by PagePartsController#sort as */*
  Parameters: {"sort"=>"menu[]=1&menu[]=2&menu[]=3&menu[]=5&menu[]=4"}
Completed 500 Internal Server Error in 0ms

RuntimeError ("menu[]=1&menu[]=2&menu[]=3&menu[]=5&menu[]=4"):

【问题讨论】：

请向我们展示您的表单标记和 JavaScript 代码。这看起来像是客户端的问题。如果您在查询字符串中有menu[]=2&menu[]=3 等，Rails 会正确地将其转换为数组（{ "menu" => [ 2, 3, ... ] }）。这里似乎发生的是，您的 jQuery 代码正在获取一个查询字符串并将其放入一个名为 sort 的 GET 参数中（可能是 URL 编码它这样做）。
这是要点gist.github.com/1280787中的标记
啊，谢谢！我知道我必须做一些愚蠢的事情。

标签： ruby-on-rails ruby serialization jquery-ui-sortable

【解决方案1】：

正如我所怀疑的，这是你的问题：

data  : {
  sort : $(".sortable").sortable('serialize'),
},

serialize 返回如下字符串：menu[]=2&menu[]=3&menu[]=1&menu[]=4。然后将该字符串分配给新对象中名为sort 的属性，并将该对象作为data 参数。结果，实际上以POST 数据形式发送到服务器的数据如下所示：

POST /page_parts/sort/ HTTP/1.1
Content-Type: application/x-www-form-urlencoded

sort=menu%5B%5D%3D2%26menu%5B%5D%3D3%26menu%5B%5D%3D1%26menu%5B%5D%3D4

..哪个 Rails（正确）解释为单个参数 sort 和解码值 menu[]=2&menu[]=3&menu[]=1&menu[]=4。

看看我打算用这个去哪里？您需要将该序列化字符串直接发送到服务器作为 POST 数据，而不是将该序列化字符串设置为 it 另一个参数的值。解决这个问题很容易。将您的 $.ajax 呼叫更改为：

$.ajax(
  { type  : 'POST',
    url   : '/page_parts/sort/',
    data  : $('.sortable').sortable('serialize') // on its own, no object
  } 
);

这将像你想要的那样发送到服务器：

POST /page_parts/sort/ HTTP/1.1
Content-Type: application/x-www-form-urlencoded

menu[]=2&menu[]=3&menu[]=1&menu[]=4

..Rails 会收到你所期望的：

>> params
# => { :menu => [ 2, 3, 1, 4 ] }
>> params[:menu]
# => [ 2, 3, 1, 4 ]

【讨论】：