1

Abaixo está um trecho do código. Tenho duvidas em como fazer para que, ao clicar em PESQUISAR, o CNPJ seja encontrado no site receitasws e os campos abaixo sejam preenchidos: http://www.receitaws.com.br/v1/cnpj/00000000000000 utilizando a função $.ajax da biblioteca jQuery.

(Onde "00000000000000" é o CNPJ a ser pesquisado)

<!DOCTYPE html>
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
    	<title>.:Formulario:.</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="estilo.css">
    	<script src="jquery.js"></script>
    	<script src="jquery.validate.js"></script>
    	<script>
    		/*$(document).ready(function(){
    			$.ajax({
    				url:'http://www.receitaws.com.br/v1/cnpj/[cnpj]',
    				method:'GET',
    				dataType:'jSon',
    				complete: function(xhr){
    					console.log(xhr.responseJSON);
    				}
    			});
    
    		});	*/
    		/*{
              "scriptkey": "DATABASE_PASSWORD",
         	    "scriptvalue": "",
         	    "scriptdefaultvalue": "",
         	    "type": "password"
             },*/
    	</script>
    </head>
    <body>
    	<form id="formu">
    		
    
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; ">
    					<input type="submit" name="pesqui" value="Pesquisar"><br/><br/>
    			
    			<label for="razao">Razão social</label><br/>
    				<input id="razao" type="text" name="razao" size="35" maxlength="50"><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
    		
    		<fieldset id="second">
    			
    			<label for="logradouro">Logradouro</label><br/>
    				<input id="logradouro" type="text" name="Logradouro" size="35" maxlength="50"><br/><br/>
    			
    			
    		</fieldset>
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>
    
    </body>
    </html>

1
  • Onde esta o restante dos campos @Diego Marques 16/10/2018 às 20:02

1 Resposta 1

4

Neste caso é necessário incluir um evento de click no botão, e em seguida realizar a chamada Ajax para preencher o formulário com o retorno. Segue abaixo um exemplo:

$(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 = $('#cnpj').val().replace(/[^0-9]/g, '');
    
    // Fazemos uma verificação simples do cnpj confirmando se ele tem 14 caracteres
    if(cnpj.length == 14) {
    
      // Aqui rodamos o ajax para a url da API concatenando o número do CNPJ na url
      $.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
        complete: function(xhr){
        
          // 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
            $('#razao').val(response.nome);
            $('#nome').val(response.fantasia);
            $('#logradouro').val(response.logradouro);
          
          // 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
    } else {
      alert('CNPJ inválido');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formu">
        <p>Cadastro de Empresa</p>
    		<fieldset id="first">
    
    			<label for="cnpj">CNPJ</label><br/>
    				<input id="cnpj" type="text" name="cnpj" size="35" maxlength="14" style="margin-right:20px; " value="27865757000102"><!-- Coloquei o value já preenchido apenas para facilitar os testes durante o desenvolvimento -->
    					<input id="pesquisar" type="button" name="pesqui" value="Pesquisar"><!-- Aqui incluímos o id="pesquisar" para poder aplicar o evento pelo ID e mudamos o type para "button"--><br/><br/>
    			
    			<label for="razao">Razão social</label><br/>
    				<input id="razao" type="text" name="razao" size="35" maxlength="50"><br/><br/>
    			
    			<label for="nome">Nome fantasia</label><br/>
    				<input id="nome" type="text" name="nome" size="35" maxlength="50"><br/><br/>
    		</fieldset>
    		
    		<fieldset id="second">
    			
    			<label for="logradouro">Logradouro</label><br/>
    				<input id="logradouro" type="text" name="Logradouro" size="35" maxlength="50"><br/><br/>
    			
    			
    		</fieldset>
    		<br/><input id=save type="submit" name="salvar" value="Salvar">
    	</form>

4
  • Diego, essa chamada do ajax pode ficar dentro do script?
    – Elder Son
    2/09/2017 às 19:40
  • 1
    Pode sim, mas o 100% ideal é você colocar em um arquivo JavaScript "exemplo.js" e incluir ele pela tag script, ex: <script src="exemplo.js"></script>, então seu código fica organizado :) 2/09/2017 às 19:44
  • Entendi. Colocar um arquivo a parte lincado. Beleza, Diego. Valeu mesmo ,cara ! Qualquer coisa, pergunto aqui mesmo ! Thanks!!
    – Elder Son
    2/09/2017 às 19:50
  • 1
    Estamos sempre a disposição. :) 2/09/2017 às 19:51

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 .