如何通过ajax在单个对象中发送多个复选框值

Question

我有一个带有 4 个不同复选框的表单，其 id 即 filter_AFFILIATION_1、filter_AFFILIATION_2 等直到 4。我正在尝试使用 ajax 调用将选中的复选框值动态发送到服务器。这是我的代码：

    $('input[type="checkbox"]').change(function(){   
    var ids = ['filter_AFFILIATION_1','filter_AFFILIATION_2','filter_AFFILIATION_3','filter_AFFILIATION_4'];    
    for(var i = 0; i < ids.length; i++){
      if(document.getElementById(ids[i]).checked === true){
      var data = {};
      data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);
        }
    }

     $.ajax({
            type: 'POST', 
            url: Routing.generate('listingpage'),
            contentType: 'application/x-www-form-urlencoded',
            data: data,        
        success: function(result,status,xhr){
            console.log(result);
        }

如果你看

data['request'+i] =  $('#'+ ids[i]).val();            
      console.log(data);

部分代码，点击后console.log的输出

1. 仅第一个复选框：

   {request0: "1"}

2. 第一个复选框，然后是第二个复选框：

   {request0: "1"}

   {request1: "2"}

3. 第一个，然后是第二个，然后是第三个复选框：

   {request0: "1"}

   {request1: "2"}

   {request2: "3"}

4. 先是第二个，然后是第三个，然后取消选中第二个复选框：

   {request0: "1"}

   {request2: "3"}

现在我的问题是我想将数据作为单个对象而不是多个对象发送，例如如果用户单击第一个复选框，然后第二个 console.log(data) 的输出应该是

 `{request0: "1", request1: "2"}`

我尝试了很多不同的方法，但似乎没有任何效果。有什么想法吗？

Answer 1

您正在覆盖您的 data 对象。您想要的是在for 循环之外声明data 对象，然后将新的键值对添加到循环内预先存在的对象中：

$('input[type="checkbox"]').change(function() {
    var ids = ['filter_AFFILIATION_1', 'filter_AFFILIATION_2', 'filter_AFFILIATION_3', 'filter_AFFILIATION_4'];

    // Create object outside of for loop
    var data = {};

    // Iterate through ids array
    for (var i = 0; i < ids.length; i++) {

        if (document.getElementById(ids[i]).checked === true) {

            // Create new key in pre-existing data object and assign value
            data['request' + i] = $('#' + ids[i]).val();

        }
    }

    // Just logging, to check
    console.log(data);

    // Request
    $.ajax({
        type: 'POST',
        url: Routing.generate('listingpage'),
        contentType: 'application/x-www-form-urlencoded',
        data: data,
        success: function(result, status, xhr) {
            console.log(result);
        }
    });
});