如何通过Ajax

Question

发送的单个对象多个复选框值必须与IDS即filter_AFFILIATION_1，filter_AFFILIATION_2和4个不同的复选框形式以此类推，直到4.我试图将选中的复选框值，通过使用动态发送到服务器阿贾克斯呼吁。这里是我的代码：

$('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（数据）的输出应是

`{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); 
     } 
    }); 
});