Problema com requisição de Cep em Ajax + jQuery
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](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](http://localhost:8080/qiestudo/trunk/)
</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 :)
Discussão (2)
Carregando comentários...