Problema com requisição de Cep em Ajax + jQuery

Thiago - Bulfaitelo · Abril 7, 2015

Olá, meus caros amigos, novamente venho aqui sanar mais uma das minhas duvidas.

Eu segui um exemplo encontrado no Google do qual você preenche o CEP e ao sair do campo ele preenche os campos seguintes com informações relacionadas ao CEP, quando realizado no testes ele funciona perfeitamente, porem quando coloco no meu sistema ele não funciona e me retornar alguns erros:

alert(ajaxOptions):
parsererror


alert(thrownError):
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Como falei isoladamente ele funciona porem online não,

Segue s códigos em HTML PHP e Js:

HTML:

<pre style='background-color:#EBEBEB; padding: 3px; border: 1px solid silver; border-radius: 10px; z-index: 100;'>
<b>Variavel Recebida:</b> <b style='color: blue;'>consultarCep</b><br /><b>Memory:</b><b style='color: green;' >88 b</b><br /><b>Variavel Saida</b>: string(12) "consultarCep"
<b>Tempo de Execucao </b> <b style ='color: red;' >0.000053 s</b></pre>
 <!DOCTYPE html>
<html lang="PT-Br">
<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/landing-page.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- Theme -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" >
    <!-- Custom Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
	<!-- Favicon  -->
	<link rel="icon" type="image/ico" href="img/favicon_qiestudo_64.ico" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Cadastro - QiEstudo</title></head>
<body class="sis-body" >

		<!-- Navigation -->
	        <nav class='navbar navbar-default navbar-fixed-top topnav' role='navigation'>
	            <div class='container topnav'>
	                <!-- Brand and toggle get grouped for better mobile display -->
	                <div class='navbar-header'>
	                    <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1'>
	                        <span class='sr-only'>Toggle navigation</span>
	                        <span class='icon-bar'></span>
	                        <span class='icon-bar'></span>
	                        <span class='icon-bar'></span>
	                    </button>
	                    <a class='navbar-brand topnav' href='http://localhost:8080/qiestudo/trunk/'>QiEstudo</a>
	                </div>
	                <!-- Collect the nav links, forms, and other content for toggling -->
	                <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
	                    <ul class='nav navbar-nav navbar-left'>                    
	                        <li>
	                            <a href='#services'>Objetivo</a>
	                        </li>
	                        <li>
	                            <a href='#contact'>Contato</a>
	                        </li>
	                        <li>
	                            <a href='/qiestudo/trunk/index.php?secao=cadastrar'>Cadastrar</a>
	                        </li>
	                    </ul>
	                    <form  class='navbar-form navbar-right' action='' method='post'>
	                        <div class='form-group'>
	                          <input type='text' name='login' placeholder='Login' class='form-control'>
	                        </div>
	                        <div class='form-group'>
	                          <input type='password' name='pass' placeholder='Password' class='form-control'>
	                        </div>
	                        <button type='submit' name='acao' value='login' class='btn btn-success'>Entrar</button>
	                    </form>
	                </div>
	                <!-- /.navbar-collapse -->
	            </div>
	            <!-- /.container -->
	        </nav>
	    <!-- /Navigation -->
		
<div class='container'>	
    <h2>Cadastro</h2>
    <hr />    
    <form class='form-horizontal' action='/qiestudo/trunk/index.php?acao=cadastrar' method='post' accept-charset='utf-8'>
        <div class='col-sm-1'>
            <label for='form_prefixo' class='control-label'>Prefixo</label>
            <div class='control-label'>
                <select class='form-control' name='form_prefixo' id='form_prefixo'>
                    <option value='0'>- -</option>
                    <option value='1'>Sr.</option>
                    <option value='2'>Dr.</option>                        
                </select>
            </div>            
        </div>
        <div class='col-sm-4'>
            <label for='form_primeiro_nome' class='control-label'> Primeiro Nome</label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_primeiro_nome' name='form_primeiro_nome' placeholder='Primeiro Nome' required >
                </div>            
        </div>
        <div class='col-sm-7'>
            <label for='sobrenome' class='control-label'> Sobrenome</label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='sobrenome' name='sobrenome' placeholder='Sobrenome' required >
                </div>            
        </div>        
        <div class='col-sm-9'>
            <label for='form_login' class='control-label'>Login</label>
            <div class='control-label'>                
                <input class='form-control' name='form_login' type='text' id='form_login' placeholder='Login' required >
            </div>
        </div>
        <div class='col-sm-12 has-success'>
            <label for='form_email' class='control-label'>Email</label>
            <div class='input-group col-sm-9'>
                <span class='input-group-addon'>@</span>
                <input class='form-control' name='form_email' type='email' id='form_email' required >
            </div>
        </div>
        <div class='col-sm-6'>
            <label for='form_pass_1' class='control-label'> Senha</label>
                <div class='control-label'>
                    <input type='password' class='form-control' id='form_pass_1' name='form_pass_1' placeholder='Senha' required >
                </div>            
        </div>
        <div class='col-sm-6'>
            <label for='form_pass_2' class='control-label'> Repita Senha </label>
                <div class='control-label'>
                    <input type='password' class='form-control' id='form_pass_2' name='form_pass_2' placeholder='Repita Senha' required>
                </div>            
        </div>
        <div class='col-sm-2'>
            <label for='form_cpf' class='control-label'> CPF </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_cpf' name='form_cpf' placeholder='CPF' required>
                </div>            
        </div>
        <div class='col-sm-2'>
            <label for='form_data_nascimento' class='control-label'> Data de Nascimento </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_data_nascimento' name='form_data_nascimento' placeholder='Data de Nascimento' required>
                </div>
        </div>
        <div class='col-sm-4' >
            <div class='hidden-xs' style='margin-top: 33px;'></div>
            <label for='sexo_m' class='radio-inline'>
                <input type='radio' id='sexo_m' name='sexo' value='m'><strong>Marculino</strong>
            </label>
            <label for='sexo_f' class='radio-inline'>
                <input type='radio' id='sexo_f' name='sexo' value='f'><strong>Femino</strong>
            </label>
        </div>
        <div class='col-sm-2'>
            <label for='form_idioma' class='control-label'> Idioma </label>
                <div class='control-label'>
                    <select name='form_idioma' id='form_idioma' class='form-control'>
                      <option value='PT-Br'>Português</option>
                    </select>
                </div>            
        </div>  
        <div class='clearfix'></div>
        <div class='col-sm-6'>
            <label for='form_telefone_1' class='control-label'> Telefone </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_telefone_1' name='form_telefone_1' placeholder='(XX) XXXXX-XXXX' required>
                </div>            
        </div>
        <div class='col-sm-6'>
            <label for='form_telefone_2' class='control-label'> Celular </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_telefone_2' name='form_telefone_2' placeholder='(XX) XXXXX-XXXX' required>
                </div>            
        </div>
        <div class='clearfix'></div>
        <div class='col-sm-2'>
            <label for='form_cep' class='control-label'> CEP </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_cep' name='form_cep' placeholder='XXXXXX-XXX' required>
                </div>            
        </div>
        <div class='col-sm-7'>
            <label for='form_rua' class='control-label'> Rua </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_rua' name='form_rua' placeholder='Rua' required>
                </div>            
        </div>
        <div class='col-sm-2'>
            <label for='form_numero' class='control-label'> Numero </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_numero' name='form_numero' placeholder='Numero' required>
                </div>            
        </div>  
        <div class='clearfix'></div>
        <div class='col-sm-6'>
            <label for='form_bairro' class='control-label'> Bairro </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_bairro' name='form_bairro' placeholder='Bairro' required>
                </div>            
        </div>  
        <div class='col-sm-4'>
            <label for='form_cidade' class='control-label'> Cidade </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_cidade' name='form_cidade' placeholder='Cidade' required>
                </div>            
        </div> 
        <div class='col-sm-1'>
            <label for='form_estado' class='control-label'> Estado </label>
                <div class='control-label'>
                    <input type='text' class='form-control' id='form_estado' name='form_estado' placeholder='UF' required>
                </div>            
        </div>
        <div class='clearfix'></div>
        <div class='col-sm-12'>
            <br>
            <button type='submit' class='btn btn-default'>Enviar</button>
        </div>
    </form>
</div>


    <!-- jQuery -->
    <script src='js/jquery.js'></script>
    <!-- Bootstrap Core JavaScript -->
    <script src='js/bootstrap.min.js'></script>    
    <!-- Analytcs -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-60734206-1', 'auto');
      ga('send', 'pageview');
    </script>    
    <!-- FB -->
    <div id='fb-root'></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = '//connect.facebook.net/pt_BR/sdk.js#xfbml=1&appId=389312774574990&version=v2.0';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- SIS JS Conf -->
	<script src="js/sis.js"></script>
	<!-- Mask Plugin -->
    <script src="js/jquery.maskedinput.min.js"></script>
    <!-- SIS Ajax -->
	<script src="js/sis_ajax.js"></script>
    

</body>
</html>

Postei todo o código por realmente não entender o motivo de não Funcionar.

PHP:

<?php
 
$cep = $_POST['cep'];
 
$reg = simplexml_load_file("http://cep.republicavirtual.com.br/web_cep.php?formato=xml&cep=" . $cep);

$dados['sucesso'] = (string) $reg->resultado;
$dados['rua']     = (string) $reg->tipo_logradouro . ' ' . $reg->logradouro;
$dados['bairro']  = (string) $reg->bairro;
$dados['cidade']  = (string) $reg->cidade;
$dados['estado']  = (string) $reg->uf;		 
return json_encode($dados);

JS:

alert("huie");
$(document).ready( function() {
  
   $('#form_cep').blur(function(){
          
           $.ajax({
                url : 'consultar_cep.php', 
                type : 'POST', 
                data : 'form_cep=' + $('#form_cep').val(), 
                dataType: 'json', 
                success: function(data){
                    if(data.sucesso == 1){
                    	
                        $('#form_rua').val(data.rua);
                        $('#form_bairro').val(data.bairro);
                        $('#form_cidade').val(data.cidade);
                        $('#form_estado').val(data.estado);
 
                        $('#form_numero').focus();
                    }
                },
   				error: function (xhr, ajaxOptions, thrownError) {
		        alert(xhr.responseText);
		        alert(ajaxOptions);
		        alert(thrownError);

		      }
           });   
   return false;    
   })
});

Desde já agradeço todas e qualquer ajuda ou luz :)

Gavaldão · Abril 7, 2015

Sua id do formulário é form_cep

No PHP não seria

$_POST['form_cep'];

Eu uso esse script e funciona ok.

Na função uso $("#cep").blur

Duas aspas.

Thiago - Bulfaitelo · Abril 8, 2015

Sua id do formulário é form_cep

No PHP não seria

$_POST['form_cep'];

Eu uso esse script e funciona ok.

Na função uso $("#cep").blur

Duas aspas.

Opa Gavaldão, após depurar todo o código acabei Encontrando o erro, o qual era no php, onde está return era pra ser um echo,

Assim resolvi o problema. agora eu estou em duvida em outra coisa, eu quero colocar todo o processamento em uma código php, e toda requisição em somente um arquivo js,

Entrar

Arquivado

Problema com requisição de Cep em Ajax + jQuery

Recommended Posts

Thiago - Bulfaitelo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gavaldão 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago - Bulfaitelo 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante