Javascript 如何在选中复选框时将复选框值从视图动态传递给控制器？

我试图在每次选中复选框时向控制器发送一个包含所有选中值的数组，但我不知道如何使用AJAX实现这一点

html.erb：

<div class="items">
<input type="checkbox" class="item-checkbox" value="a">A
<input type="checkbox" class="item-checkbox" value="b">B
<input type="checkbox" class="item-checkbox" value="c">C
</div>

控制器：

class BudgetController < ApplicationController

  def view

  ....

  end

end

class BudgetController

---

如何在不重新加载页面的情况下将所选项目数组传递给控制器？

这将涉及将它们放入表单中并让表单提交：

$('#MyForm').submit(function (event) {       
   event.preventDefault(); // stop form from submitting normally
   var form = $(this); // get the form
   var dataToSend = form.serialize(); // get the submitted form items
   var url = form.attr('action'); // where we're submitting the data to
   $.post(url, dataToSend, function (data) {
      // optional function to deal with returned data
   }).done(function (data) {
      // what to do when it's completed
   }).fail(function (jqXHR, textStatus, errorThrown) {
      // what to do if it fails
   });
});

---

然后，您可以在服务器端像处理常规表单提交一样处理它们。

您尝试过什么？一个简单的

$.ajax

post调用或

$.post

就可以做到这一点。您只需要序列化

数据

属性的输入。我尝试过，但如何访问控制器中的数据？您需要显示控制器代码。它需要与处理普通表单相同的代码。发布了我的控制器代码。我的复选框不在表格中，应该是吗？

$('#MyForm').submit(function (event) {       
   event.preventDefault(); // stop form from submitting normally
   var form = $(this); // get the form
   var dataToSend = form.serialize(); // get the submitted form items
   var url = form.attr('action'); // where we're submitting the data to
   $.post(url, dataToSend, function (data) {
      // optional function to deal with returned data
   }).done(function (data) {
      // what to do when it's completed
   }).fail(function (jqXHR, textStatus, errorThrown) {
      // what to do if it fails
   });
});