javascript - 如何通过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);
        }
    });
});