通過Ajax請求填充數組

我需要通過AJAX從數據庫中收集一些數據並將其放入數組中。不幸的是，由於某種原因，我無法實現這一點。通過Ajax請求填充數組

AJAX發送數據以檢索特定數據。此數據如下：

[{"comment_id":154,"comment_text":"Moduleboeken PHP","date_updated":"2015-06-01 10:34:47"},{"comment_id":155,"comment_text":"Moduleboeken JAVA","date_updated":"2015-06-01 10:34:54"}] 
[{"comment_id":149,"comment_text":"Werksfeer","date_updated":"2015-06-01 10:33:57"}] 
[{"comment_id":152,"comment_text":"Begeleiding Elleke Jagersma","date_updated":"2015-06-01 10:34:27"}] 
[{"comment_id":260,"comment_text":"Studievoortgang JAVA","date_updated":"2015-06-01 13:01:15"}] 
[{"comment_id":153,"comment_text":"Faciliteiten","date_updated":"2015-06-01 10:34:39"}]

功能來收集這樣的數據：

function sendRetrieveAjax(url, data) { 
    return new Promise(function(resolve, reject) { 
     $.ajax({ 
      url: url, type: 'post', data: data,     
      success: function(data) { 
       resolve(data); 
      }, 
      error: function(request, status, error) { 
       reject([{request: request, status: status, error: error}]); 
      } 
     }); 
    }); 
}

主代碼通過5個DOM元素運行時，從他們那裏收集的ID，並在AJAX使用該發送和檢索功能。如果這是成功的，它將它放入一個數組中。

var elements = $('.note_block'); 
var dataCollection = new Array(); 

for(i = 0; i < elements.length; i++) { 
    var element = $(elements[i]); 
    var data = { 
     commenttype_id : element.children('#commenttype_id').val(), 
     week_id   : $('#week_id').val() 
    } 

    sendRetrieveAjax('../functions/getcomments.php', data).then(function(data) { 
     console.log(data); 
     dataCollection[i] = data; 
    }); 
} 
console.log(dataCollection);

該數組不幸空着，而控制檯顯示正確的數據。

有人能夠啓發我嗎？

來源

2015-06-02 Smoothal

FYI，[jQuery.post]（http://api.jquery.com/jQuery.post/）返回它實現它自己的[無極接口]（HTTP的對象： //api.jquery.com/category/deferred-object/） – CodingIntrigue

@Rraham，不知道，但現在我做，謝謝！ – Smoothal

@dfsq，那個帖子幫助我實現了我的ajax調用的promise方法。但它不能解決我的問題。 – Smoothal

你有兩個問題

您需要的i值綁定到sendRetrieveAjax
你需要填充它後打印的dataCollection值（注意使用承諾）

要解決第一個問題，您需要使用IIFE（立即調用函數表達式）

for(i = 0; i < elements.length; i++) { 
    var element = $(elements[i]); 
    var data = { 
     commenttype_id : element.children('#commenttype_id').val(), 
     week_id   : $('#week_id').val() 
    } 

    (function(_i) { 
     sendRetrieveAjax('../functions/getcomments.php', data).then(function(data) { 
      console.log(data); 
      dataCollection[_i] = data; 
     }); 
    })(i); 
}

而要解決第二個問題，你可以使用數組或承諾保持所有要求的應許在裏面，並執行順序或並行

var requests = [] 
; 

for(i = 0; i < elements.length; i++) { 
    var element = $(elements[i]); 
    var data = { 
     commenttype_id : element.children('#commenttype_id').val(), 
     week_id   : $('#week_id').val() 
    } 

    // No need to store the URL, just store the data 
    requests.push(data); 
} 

requests = requests.map(function(data) { 
    return sendRetrieveAjax('../functions/getcomments.php', data); 
}); 

Promise.all(requests).done(function(responses) { 
    console.log(responses); 
    dataCollection = responses; 
}, function(err) { 
});

來源

2015-06-02 13:26:02 mshaaban

您需要映射每個單獨的響應以校正陣列指數。在這種情況下，最優化的解決方案是使用$.when來提供一組promise，並獲得具有有序響應數據對象的集中響應對象。

我也得到了簡化sendRetrieveAjax爲$.ajax已經返回承諾對象：

function sendRetrieveAjax(url, data) { 
    return $.ajax({ 
     url: url, 
     type: 'post', 
     data: data 
    }); 
} 

var promises = $('.note_block').map(function(i) { 
    return sendRetrieveAjax('../functions/getcomments.php', { 
     commenttype_id: $(this).children('.commenttype_id').val(), 
     week_id: $('#week_id').val() 
    }); 
}).get(); 

$.when.apply(null, promises).then(function() { 
    var dataCollection = $.map(arguments, function(data) { 
     return data[0]; 
    }); 
    console.log('Data Collection', dataCollection); 
});

另一件事，不重複的ID，請使用.commenttype_id類來代替。

這裏是一個演示：http://plnkr.co/edit/r9NnlxIQjUhNvTYwfLy7?p=preview

來源

2015-06-02 13:29:29 dfsq

通過Ajax請求填充數組

回答

相關問題