通过 ajax 在 Rails 中不使用表单提交复选框答案

【问题标题】：Submit checkboxes via ajax without a form in Rails通过 ajax 在 Rails 中不使用表单提交复选框
【发布时间】：2014-02-18 03:21:38
【问题描述】：

如何在不将复选框包装在表单中的情况下通过 ajax 将复选框值提交（发布/放置）到 Rails 3 控制器？换句话说，我如何将复选框序列化为没有形式的数组。

对此的任何帮助将不胜感激。谢谢！

这是我正在尝试做的具体操作：

查看：

<ul>
  <%= @items.each do |item|
    <li>
      <%= checkbox_tag_tag "item_ids[]", item.id, false,
          :class => "item-checkbox" %>
      <%= item.name %>
    </li>
  <% end %>
</ul>

控制器：

class ItemsController < ApplicationController

  respond_to :html, :js, :json
  .
  .
  .
  def update_multiple_items
    Item.update_all(
      { :category_id => params[:category_id] },
      { :id => params[:item_ids] }
    )
  end

end

Javascript (jQuery)：

$("#update-link").click(function() {

  var categoryId = 2;

  var itemsArray = $(".item-checkbox:checked").serializeArray();

  $.ajax({
    type: "PUT",
    url: "items/update_multiple_items",
    data: {
      category_id: categoryId,
      items_ids: itemsArray
    },
    dataType: "script"
  });

});

我收到带有以下信息的 Active Record 错误：

!ruby/hash:ActiveSupport::HashWithIndifferentAccessname: item_ids[]value: ''303'''

这里是请求参数：

Parameters:

{"parent_id"=>"7", "item_ids"=>{"0"=>{"name"=>"item_ids[]", "value"=>"302"}, "1"=>     
{"name"=>"item_ids[]", "value"=>"303"}}}

【问题讨论】：

我在下面的回答对您的问题有帮助吗？

标签： jquery ruby-on-rails ruby-on-rails-3

【解决方案1】：

我不能肯定地说，但您的$(".item-checkbox:checked").serializeArray(); 似乎确实有问题。它不会产生简单的项目ID 数组。相反，它会生成一个代表每个复选框的对象数组。

您想提交的数据格式是什么：

 {"parent_id"=>"7", "item_ids"=> [1,2,3]}

您提交的内容：

 {"parent_id"=>"7", "item_ids"=>{"0"=>{"name"=>"item_ids[]", "value"=>"302"}, "1"=>  {"name"=>"item_ids[]", "value"=>"303"}}}

换句话说，$(".item-checkbox:checked").serializeArray(); 产生一个散列数组，其格式大致为：[{name: "item_ids[]", value: "302"},{name: "item_ids[]", value: "303"}]

但您只想提交[302,303] 或["302","303"]。

我会做什么（使用下划线 js 示例）：

 var serializedArray = $("input:checked").serializeArray();

 var itemIdsArray = _.map(serializedArray, function(item){
    return item["value"];
 });

 # itemIdsArray should now be ["302","303"].. you can check by a console.log
 console.log(itemIdsArray);

然后在你的 ajax 中提交这个数组：

 $.ajax({
   type: "PUT",
   url: "items/update_multiple_items",
   data: {
     category_id: categoryId,
     items_ids: itemsIdsArray
   },
   dataType: "script"
 });

* 非下划线示例 *

如果你不使用 underscorejs，你可以这样写。（不过，我建议您检查一下，它很棒：http://underscorejs.org/。这是一个包含许多易于使用的基本功能的小型库，人们不断推出自己的功能）。

 var serializedArray = $("input:checked").serializeArray();
 var itemIdsArray = [];

 for (var i = 0, length = a.length; i < length; i++) {
    itemIdsArray.push(serializedArray[i]['value']);
 }

【讨论】：