0

Bom pessoal como eu posso imprimir corretamente o Hello World, utilizando requisição AJAX, dentro de um for?

Minha dúvida real é: entender porque o for executa todo o seu loop na primeira requisição ajax, para somente depois executar loop na segunda requisição ajax?

Hoje tenho esse resultado:

inserir a descrição da imagem aqui

Código HTML e JS

<html>
    <head>
    </head>
    <body>

    </body>
    <script src="../jquery-3.3.1.min.js"></script>
</html>
<script>
$(document).ready(function(){

});

function call(){
    for(i = 0; i <= 5; i++){
        $.ajax({
            url: 'json.json',
            type: 'get',   
            success: function(data){
            call_1(data['data'].one);
            $.ajax({
                url:'json.json',
                type: 'get',
                success: function(data){
                    call_2(data['data'].two);
                }
            });
            }
        });
    }
}

function call_1(res){
    $('body').append(res);
}

function call_2(res){
    $('body').append(res+'<hr>');
}

</script>

Meu arquivo json.json:

{
    "data": {
        "one": "Hello",
        "two": " World"
    }
}

Resolvi enviando junto com as opções do ajax o:

async: false,

Ficando assim:

function call(){
    for(i = 0; i <= 5; i++){
        $.ajax({
            async: false,
            url: 'json.json',
            type: 'get',   
            success: function(data){
            call_1(data['data'].one);
            $.ajax({
                async: false,
                url:'json.json',
                type: 'get',
                success: function(data){
                    call_2(data['data'].two);
                }
            });
            }
        });
    }
}
8
  • Que parte do código podes mudar e que parte não podes mudar?
    – Sergio
    Commented 5/12/2018 às 17:41
  • A parte do ajax. Commented 5/12/2018 às 17:49
  • Podes explicar melhor? Eu perguntei qual podes mudar e qual não podes...
    – Sergio
    Commented 5/12/2018 às 17:50
  • Então, na verdade eu queria entender porque o for executa todo o seu loop na primeira requisição ajax, para somente depois executar loop na segunda requisição ajax. Commented 5/12/2018 às 18:00
  • 1
    Lê esta resposta e diz se responde à tua dúvida: pt.stackoverflow.com/questions/1237/…
    – Sergio
    Commented 5/12/2018 às 18:07

1 Resposta 1

0

Você pode fazer uma função recursiva ao invés de um for

function call(index) {
    $.ajax({
        url: 'json.json',
        type: 'get',
        success: function (data) {
            call_1(data['data'].one);
            $.ajax({
                url: 'json.json',
                type: 'get',
                success: function (data) {
                    call_2(data['data'].two);
                }
            });
        }
    });
    setTimeout(function () {
        if (index < 5) {
            index++;
            call(index);
        }
    }, 50);
}
Lembrando onde chamar a função call começar com o index 0

2
  • Continua executando da mesma forma. Link: prntscr.com/lr705t Vlww Mateus. Commented 5/12/2018 às 19:37
  • Acho que agora vai , ali onde tem o 50 é o tempo que vai espera até chamar a função novamente Commented 6/12/2018 às 10:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .