Ajax request with data from another Ajax

Asked

Viewed 146 times

0

I have an Ajax. that seeks information from receitaws this ajax brings the address and tbm the zip code. And I have another Ajax, who relays address information, through the zip code, one in particular, which I need, which is the Muncipio Code.

So I wanted to do like this, when searching the CNPJ, upload the data from the receiraWs when loading the data, already automatically, make the other request via CEP. thus, bringing the Code of the municipality.

That is, if the query to the receitaws was successful, at the time it had loaded the data, when arriving at the given zip code, already did the second ajax

   <script>
$(document).ready(function() {

    // Adicionamos o evento onclick ao botão com o ID "pesquisar"
    $('#pesquisar').on('click',
        function(e) {

            // Apesar do botão estar com o type="button", é prudente chamar essa função para evitar algum comportamento indesejado
            e.preventDefault();

            // Aqui recuperamos o cnpj preenchido do campo e usamos uma expressão regular para limpar da string tudo aquilo que for diferente de números
            var cnpj = $('#Cliente_Cnpj').val().replace(/[^0-9]/g, '');

            // Fazemos uma verificação simples do cnpj confirmando se ele tem 14 caracteres
            
                            $.ajax({
                                url: 'https://www.receitaws.com.br/v1/cnpj/' + cnpj,
                                method: 'GET',
                                dataType:
                                    'jsonp', // Em requisições AJAX para outro domínio é necessário usar o formato "jsonp" que é o único aceito pelos navegadores por questão de segurança
                                beforeSend: function() {
                                    $('#status').html('<div class="alert alert-info">Buscando CNPJ</div>');
                                },

                                complete: function (xhr) {
                                    $('#status').html('<div class="alert alert-success">CNPJ Encontrado</div>');
                                    setTimeout(function() {
                                        $('#status').html('');
                                    }, 1000);

                                    // Aqui recuperamos o json retornado
                                    response = xhr.responseJSON;

                                    // Na documentação desta API tem esse campo status que retorna "OK" caso a consulta tenha sido efetuada com sucesso
                                    if (response.status == 'OK') {

                                        // Agora preenchemos os campos com os valores retornados
                                        $('#Cliente_RazaoSocial').val(response.nome);
                                        $('#Cliente_NomeFantasia').val(response.fantasia);
                                        $('#Endereco_Rua').val(response.logradouro);
                                        $('#Endereco_Numero').val(response.numero);
                                        $('#Endereco_Bairro').val(response.bairro);
                                        $("#Endereco_Cidade_Nome").val(response.municipio);
                                        $("#Endereco_Cidade_Estado_Uf").val(response.uf);
                                        $('#Endereco_Complemento').val(response.complemento);
                                        var cep = $('#Endereco_Cep').val(response.cep);
                                        cep.replace(".", "");
                                        $('#Endereco_Cep').val(cep);//aqui quero fazer a function para buscar o cep quando esse campo for carregado com dados

                                        //$('#Cliente_Cnae').val(response.atividade_principal);
                                        // Aqui exibimos uma mensagem caso tenha ocorrido algum erro
                                    } else {
                                        alert(response.message); // Neste caso estamos imprimindo a mensagem que a própria API retorna
                                    }

                                }
                            });
                     

                    }
                });

                // Tratativa para caso o CNPJ não tenha 14 caracteres
            
        });
});
</script>

<script type="text/javascript">

        $(document).ready(function() {

            function limpa_formulário_cep() {
                $("#Endereco_Cidade_Codigo").val("");
            }

            //Quando o campo cep perde o foco.
            $("#Endereco_Cep").blur(function() {

                //Nova variável "cep" somente com dígitos.
                var cep = $(this).val().replace(/\D/g, '');

                //Verifica se campo cep possui valor informado.
                if (cep != "") {

                    //Expressão regular para validar o CEP.
                    var validacep = /^[0-9]{8}$/;

                    //Valida o formato do CEP.
                    if(validacep.test(cep)) {

                        //Preenche os campos com "..." enquanto consulta webservice.

                        $("#Endereco_Cidade_Codigo").val("...Procurando");

                        //Consulta o webservice viacep.com.br/
                        $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                            if (!("erro" in dados)) {
                                //Atualiza os campos com os valores da consulta.
                             
                                $("#Endereco_Cidade_Codigo").val(dados.ibge);
                                
                            } //end if.
                            else {
                                //CEP pesquisado não foi encontrado.
                                limpa_formulário_cep();
                                alert("CEP não encontrado.");
                            }
                        });
                    } //end if.
                    else {
                        //cep é inválido.
                        limpa_formulário_cep();
                        alert("Formato de CEP inválido.");
                    }
                } //end if.
                else {
                    //cep sem valor, limpa formulário.
                    limpa_formulário_cep();
                }
            });
        });

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<input class="form-control-sm" placeholde="CNPJ" id="Cliente_Cnpj" name="Cliente_Cnpj"  type="text" >
<a href="#" id="pesquisar" class="btn btn-small" style="padding: 0">
<i class="fa fa-search" style="color: #020204;">Pesquisar Cnpj</i>
</a>
<input class="form-control-sm id="Cliente_RazaoSocial" name="Cliente_RazaoSocial" placeholder="rAZÃO sOCIAL">

<input class="form-control-sm"  placeholder="Código Cidade" id="Endereco_Cidade_Codigo" name="Endereco_Cidade_Codigo">

<input class="form-control-sm " placeholder="CEP" id="Endereco_Cep" name="Endereco_Cep">

1 answer

1


Use the methods below to process calls:

$.getJSON("https://...", function(dados1) {
   // 1ª Chamada

})
.done(function(dados1) {
    console.log(dados1); // Dados retornados da primeira chamada

    $.getJSON("https://...", function(dados2) {
        // 2ª Chamada

    })
    .done(function(dados2) {
       console.log(dados2); // Dados retornados da segunda chamada
    })
    .fail(function() {
    })
    .always(function() {
    });
})
.fail(function() {
})
.always(function() {
});

Always watching for the conversion of the received data;

Follow full documentation for more details: https://api.jquery.com/jQuery.getJSON/

  • Sorry, your layman, the first call, is the receivers, the second is the viaCep, this method, I put in a separate script, next to the first call Ajax?

  • 1

    I edited the answer, maybe it’s closer to understanding

Browser other questions tagged

You are not signed in. Login or sign up in order to post.