Javascript 如何使用Ajax通过复选框将对象移动到另一个作用域？

我陷入了沉思。我有一个复选框，我想用它将相应的对象转移到我页面上的另一个作用域。此外，我只想传输这个选中对象的一个字段。我使用了早期的Ajax，创建了一个.json文件，然后在控制器中响应它。在我的例子中，输入复选框似乎没有

remote:true

选项

视图/任务/_index.html

<h3>Tasks database</h3>

<table>

  <% @tasks.each do |task| %>
    <tr class='tasks' id="task_<%= task.id %>">

    #Some stuff

      <td>
        <input type="checkbox" class='check' data-id="<%= task.id %>" >
      </td>

    </tr>

  <% end %>

</table>

<h3>Completed</h3>

<div class="complete-tasks">
</div>

但我只想使用Ajax重新定位一个“标题”字段。有人能告诉我如何做到这一点吗？我想我需要在复选框中输入一些id并定义$.ajax

模型/任务.rb

class Task < ActiveRecord::Base

  scope :complete, -> { where(complete: true) }
  scope :incomplete, -> { where(complete: nil) }

  belongs_to :user
end

类任务{where（complete:true）}
作用域：不完整，->{where（complete:nil）}
属于：用户
结束

您只需向url发出请求，然后移动表格行/标题单元格

 $(document).on('ready page:load', function () {
        $('.check').on('change', function(){
        if ($(this).is(':checked')) {
            id = $(this).attr('data-id');
            //Url is the site you want to hit.
            var jqXHR = $.ajax(url);
            var element = this;
            jqXHR.done(function(data){
                //Ajax finish here.
                task = $(element).closest("tr");
                $('.complete-tasks').last().after(task);
            });
        }
      });
    });

编辑：固定的上下文使用

查看jQuery文档，了解如何正确设置jqXHR：

---

是否只将标题单元格中的“完成任务”重新定位到.complete tasks div中，而不重新定位表行？@MinusFour-yes。我想这样做。但我不知道怎么做。好的，我们可以省略这个。假设我想移动一排。如何使用Ajax实现这一点？是否要执行HttpRequest，然后移动表行/标题单元格？@MinusFour是的，就是这样。但我希望它不刷新页面。这就是我想应用Ajax的原因。据我所知，Ajax使用了XMLHttpRequest。感谢您的澄清。我只是好奇我是否应该在复选框行中添加一些数据url属性？这真的取决于你们想做什么。您可以为每个复选框添加一个带有url的数据属性，这样您就可以选择它并将其传递给ajax调用。然而，只有当我点击完全不同的URL时，我才会使用这种方法。否则，我可以只使用作为url基础的字符串文本，并用不同的参数连接它<代码>'http://www.mywebsite.com/modules/tasks/“+idTask+”/完成”

 $(document).on('ready page:load', function () {
        $('.check').on('change', function(){
        if ($(this).is(':checked')) {
            id = $(this).attr('data-id');
            //Url is the site you want to hit.
            var jqXHR = $.ajax(url);
            var element = this;
            jqXHR.done(function(data){
                //Ajax finish here.
                task = $(element).closest("tr");
                $('.complete-tasks').last().after(task);
            });
        }
      });
    });