Question

我需要通过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);

阵列不幸是空的，而控制台显示正确的数据。

有人可以启发我吗？

Answer 1

你有两个问题

您需要将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) {
});

Answer 2

您需要将每个单独的响应映射到正确的数组索引。在这种情况下，最佳解决方案是使用$.when提供一组promises，并使用有序响应数据对象获取集中式响应对象。

我还简化了sendRetrieveAjax，因为$.ajax已经返回了promise对象：

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

通过ajax请求填充数组

2 个答案: