0

Tenho uma tela onde lista as Marcas cadastradas no sistema, logo que o usuario abrir essa tela, a listagem de marcas deve acontecer. Eu já tenho o AJAX feito e estava funcionando, porém eu quis tirar ele de dentro da pagina marcas.php e deixar em um arquivo onde vai ter apenas os AJAX do meu sistema. Porém eu não estou sabendo como capturar o JSON que o AJAX retorna, segue a estrutura dos arquivos:

marcas.php

<script type="text/javascript">
    $(document).ready(function(){
        $("input[name='inputPesquisar']").val('');
        $("input[name='inputDataInicial']").val('');
        $("input[name='inputDataFinal']").val('');

        console.log(listarMarcas());
    });
</script>

ajax.js

function listarMarcas(){
    var retornoAjax;
    $.ajax({
        type: "GET",
        url: "../api/api.marcas.php",
        data: {"ajax-params": 1},
        dataType: "JSON",
        success: function(res){ 
            retornoAjax = res;
        },
        error: function(res){
            retornoAjax = res;
        }
    });

    return retornoAjax; 
}

Do jeito que está, quando o usuario abre a pagina marcas.php, o console.log mostra apenas UNDEFINED, porém esse ajax de listagem retorna um JSON, como posso captura-lo lá na pagina marcas.php sendo que o ajax está na pagina ajax.js?

1 Resposta 1

1

A função Ajax é assíncrona ou seja, ela é chamada e sua execução não bloqueia o fluxo principal.

Você deve esperar um ou outro resultado da requisição (sucesso ou erro) e então retornar.

Podes chegar ao resultado esperado usando uma função de "callback" ou envelopando em uma Promisse.

usando um callback:

function listarMarcas(callback){
    $.ajax({
        type: "GET",
        url: "../api/api.marcas.php",
        data: {"ajax-params": 1},
        dataType: "JSON",
        success: function(res){ 
            callback(res);
        },
        error: function(res){
            callback(res);
        }
    });
}
// usar
listarMarcas(function(response){
    console.log(response);
});

usando Promises:

function listarMarcas(){
    return new Promise((resolve, reject) => {
        $.ajax({
            type: "GET",
            url: "../api/api.marcas.php",
            data: {"ajax-params": 1},
            dataType: "JSON",
            success: function(res){ 
                resolve(res);
            },
            error: function(res){
                reject(res);
            }
        });
    });
}
// usar
listarMarcas().then(response => {
    console.log(response);
}).catch(err => {
    console.error(err);
});

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 .