2
$(function () {
$("#formulario").submit(function() {
    var cidade_nome = $('#cidade option:selected');
    var ano1 = $('#ano1').val();
    var ano2 = $('#ano2').val();
    var registro;
    var param_1;
    var resposta;
    $.post('envia.php', {cidade: cidade_nome[0].value}, function(retorno) {
    retorno = JSON.parse(retorno);
    console.log(retorno) //sai certo
    });
    //queria usar aqui
    console.log(retorno) //ele sai como undefined no console

Estou tentando usar o callback da função,ou seja o a variável 'retorno' fora dela(função),procurei muito no fórum e o motivo mais falado é por ser assíncrono, entretanto não consegui chegar a uma solução.

1

2 Respostas 2

4

O AJAX é assíncrono. Isso quer dizer que se tiveres por exemplo este código:

$.post('envia.php', {cidade: cidade_nome[0].value}, function(retorno) {
    // fazer algo quando o AJAX tiver sucedido
});
alert('SOpt');

o alert vai ser corrido antes de function(retorno) {. Essa função só vai ser corrida quando o AJAX receber a resposta do servidor, e a variável retorno só receberá o seu valor nesse momento, nesse escopo.

Uma opção é usar async: false, mas em 99.8% das vezes é uma má solução e uma fuga a compreender como o JavaScript funciona. Assim o que deves fazer é ter uma função que corra o que precisas, no escopo certo. Ou seja uma solução que faz uso de "Control flow".

Quando dizes que queres "usar a variável retorno fora dela (função)" eu sugiro inverteres o problema e pensares que outras variáveis precisas ter no escopo dessa função?

Uma solução é simplesmente definires essa função antes do ajax e passá-la como argumento do $.post():

var el = document.querySelector('xpto');
function fnRetorno(retorno){
    el.innerHTML = retorno;
}
$.post('envia.php', {cidade: cidade_nome[0].value}, fnRetorno);

Se explicares melhor que funcionalidade te falta posso ajudar a ajustar a resposta.

0
1

O método $.post é assíncrono, portanto ele será executado depois do envio do formulario, então você terá que fazer uma execução sincrona, para isto terá de usar $.ajax com async = false.

var onSucess= function(retorno) {
    retorno = JSON.parse(retorno);
    console.log(retorno);
};
$.ajax({
    async: false,
    type: "POST",
    url: 'envia.php',
    data: {cidade: cidade_nome[0].value},
    success: onSucess
});

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 .