Question

所以，我有一个数据列表，我将其放在我的视图中，每个列表项都有一个id。

这些列表项中的每一项都是一个栏，我为至少一个用户要去的每个栏创建了一个文档。对于那些没有用户去的酒吧，没有创建文档。

我需要为数据库的每个列表项进行AJAX调用以检查

i）如果该列表项存在文档 ii）如果存在文档，则根据该文档有多少用户。

我尝试使用while循环的解决方案，其中while循环的更新包含在AJAX调用的回调中。这是代码

function updateAllGoingButtons(){
    var i = 0;
    var dataToPass = {};
    var numButtons = global_data_object.listData.businesses.length;
    while(i < numButtons){
        dataToPass.button = global_data_object.listData.businesses[i].id;
        dataToPass = JSON.stringify(dataToPass);
        ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', '/update-buttons', dataToPass, function(data){
            console.log(i);
            i++;
        }));
    }
}

当我试图运行该功能时，我收到错误

请求实体太大

那么，有没有更好的方法去做我想做的事情？我应该使用承诺吗？或者，我试图在while循环中进行AJAX调用的方式只是一个错误？

供参考，这里是ajaxRequest函数

'use strict';

var appUrl = window.location.origin;
var ajaxFunctions = {
   ready: function ready (fn) {
      if (typeof fn !== 'function') {
         return;
      }

      if (document.readyState === 'complete') {
         return fn();
      }

      document.addEventListener('DOMContentLoaded', fn, false);
   },
   ajaxRequest: function ajaxRequest (method, url, data, callback) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            callback(xmlhttp.response);
         }
      };

      xmlhttp.open(method, url, true);
      xmlhttp.setRequestHeader('Content-type', 'application/json');
      xmlhttp.send(data);
   }
};

Answer 1

你应该看看名为async的npm库，它有一个你可以在其中进行异步调用的方法。如果你使用promises，Bluebird中的Promise.all方法可能对你非常有用。

Answer 2

所以，这就是我如何在循环中完成多个AJAX调用。我使用了这个资源https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f#.d7ymg99mp（很棒的资源！）

这是代码

$('.btn-group').find('button').each(function() {
        console.log($(this).attr('id'));
        dataToPass.button = $(this).attr('id');
        var ajax = $.ajax({
            url: '/update-buttons',
            method: 'post',
            data: dataToPass,
            dataType: 'json',
        }).success(function(data){
            console.log(data);
        });
    });

基本上，这样做是选择一个带有'btn-group'类的div，然后使用jQuery each运算符迭代该div中的每个按钮。然后只需发出一个AJAX请求并使用成功链回调来访问返回的数据。

AJAX在循环内调用

2 个答案: