Wie man mehrere Checkbox-Werte in einem einzelnen Objekt durch AJAX senden

Question

Ich habe ein Formular mit 4 verschiedenen Kontrollkästchen mit IDs nämlich Filter_AFFILIATION_1, Filter_AFFILIATION_2 und so weiter bis 4. Ich versuche, die Checked Checkboxes Werte dynamisch an den Server zu senden Ajax Anruf. Hier ist mein Code:

$('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); 
     } 

Wenn man sich

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

Teil des Codes, der Ausgang des console.log wenn ich auf

1. Nur erste Kontrollkästchen:

   {request0: "1"}

2. erste und dann die zweite Checkbox:

   {request0: "1"}

   {request1: "2"}

3. erste und dann die zweite und dann 3. Checkbox:

   {request0: "1"}

   {request1: "2"}

   {request2: "3"}

4. Zuerst dann die zweite, dann dritte und dann deaktivieren zweite Checkbox:

   {request0: "1"}

   {request2: "3"}

Nun mein Problem ist, dass ich will zu Bitte senden Sie die Daten als ein einzelnes Objekt, anstatt mehrere Objekte, wie wenn der Benutzer zuerst Checkbox klickt und dann die zweite die Ausgabe von console.log (Daten) sollte

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

ich viele verschiedene Methoden versucht haben, aber nichts scheint zu funktionieren. Irgendwelche Ideen?

Answer 1

Sie überschreiben Ihr Objekt data. Was Sie wollen, ist das data Objekt außerhalb des for Schleife zu erklären, und fügen Sie dann neue Schlüssel-Wert-Paare in die bereits vorhandenen Objekt in der Schleife:

$('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); 
     } 
    }); 
});