2016-10-17 4 views
1

그래서, 필자는 필자가보기에 내놓는 데이터 목록을 가지고 있으며 각 목록 항목에는 ID가 있습니다.AJAX가 루프 안에서 호출합니다.

각 목록 항목은 막대이며 하나 이상의 사용자가가는 각 막대에 대해 만들어진 문서가 있습니다. 사용자가없는 바에는 작성된 문서가 없습니다.

나는 문서를 많은 사용자가 따라가는 방법 문서가있는 경우 그 목록 항목 II)이있는 경우)

난을 확인하기 위해 데이터베이스에 각 목록 항목에 대한 AJAX 호출을 만들 필요가 문서.

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++; 
     })); 
    } 
} 

는 내가하려고하는 일에 대해 갈 수있는 더 좋은 방법이있다, 그래서

Request entity too large

입니까? 약속을 사용해야합니까? 아니면 while 루프에서 AJAX 호출을 시도하는 방식에 오류가 있습니까?

는 참고로, 여기 당신이 내 비동기 호출을 할 수있는 각각의 방법을 가지고, 당신은 비동기라는 NPM 라이브러리를 확인해야 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); 
    } 
}; 
+0

예 약속을 사용하는 것을 고려하십시오 ... 약속은 항상 Ajax 호출을 처리하는 가장 좋은 방법입니다. – Geeky

+0

'요청 엔티티가 너무 많습니다. '라는 오류는'while '루프와 연결된 곳에서는 없습니다. 너가 다른 기계 장치에가더라도 그것은 올 것이다. – vijayP

+0

@vijayP - 비동기 라이브러리를 사용하더라도 동일한 오류가 발생합니다. –

답변

0

입니다. 약속을 사용하면 Bluebird의 Promise.all 메소드가 매우 유용 할 수 있습니다.

0

그래서 루프 내에서 여러 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 그룹'클래스 다음 반복으로 사업부를 선택의 사용 jQuery 각 연산자를 사용합니다. 그런 다음 AJAX 요청을 만들고 성공 체인 콜백을 사용하여 반환 된 데이터에 액세스합니다.

관련 문제