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