Nossa estrutura de arquivos e pastas para esse tutorial ficar\u00e1 assim:<\/p>\n
- \n
- js\/\n
- \n
- cep.js<\/li>\n<\/ul>\n<\/li>\n
- index.html<\/li>\n<\/ul>\n
Iremos utilizar tamb\u00e9m para estiliza\u00e7\u00e3o do\u00a0formul\u00e1rio o Bootstrap do Twitter, e para consulta utilizaremos o jQuery<\/em>.<\/p>\n
![\"jquery\"](\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/jquery-1-600x300.jpg\")
Vamos criar nossa estrutura html, no arquivo index.html<\/em>:<\/p>\n<!doctype html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>Consultar CEP via AJAX com jQuery<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"\/>\r\n<\/head>\r\n<body>\r\n\t<div class=\"container\">\r\n\t\t<div class=\"page-header\">\r\n\t\t\t<h1 class=\"text-center\">Consultar CEP via Ajax com jQuery<\/h1>\r\n\t\t<\/div>\r\n\t\t<form class=\"form-horizontal\">\r\n\t\t\t <div class=\"form-group\">\r\n\t\t\t\t<label for=\"cep\">CEP<\/label>\r\n\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"cep\" placeholder=\"CEP\" \/>\r\n\t\t\t <\/div>\r\n\t\t\t <div class=\"form-group\">\r\n\t\t\t\t<label for=\"rua\">Rua<\/label>\r\n\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"rua\" placeholder=\"Rua\" \/>\r\n\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t <div class=\"form-group\">\r\n\t\t\t\t<label for=\"rua\">Bairro<\/label>\r\n\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"bairro\" placeholder=\"Bairro\" \/>\r\n\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t <div class=\"form-group\">\r\n\t\t\t\t<label for=\"cidade\">Cidade<\/label>\r\n\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"cidade\" placeholder=\"Cidade\" \/>\r\n\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t <div class=\"form-group\">\r\n\t\t\t\t<label for=\"uf\">Estado (UF)<\/label>\r\n\t\t\t\t<input type=\"text\" class=\"form-control\" name=\"uf\" placeholder=\"Estado\" \/>\r\n\t\t\t <\/div>\t\t \r\n\t\t<\/form>\r\n\t<\/div>\t\r\n\t<script type=\"text\/javascript\" src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"js\/cep.js\"><\/script>\t\r\n<\/body>\r\n<\/html><\/pre>\n
Explicando o c\u00f3digo acima:<\/p>\n
- \n
- Na linha 6, chamamos o arquivo\u00a0bootstrap.min.css, de uma CDN, para realizar estiliza\u00e7\u00e3o do formul\u00e1rio;<\/li>\n
- Na linha\u00a013 a 37, criamos um formul\u00e1rio comum, apenas com a estrutura para utilizar o estilo do Bootstrap;<\/li>\n
- Na linha 39 a 40, chamamos o jQuery do CDN e tamb\u00e9m o script cep.js, que\u00a0ir\u00e1 conter a consulta \u00e0 API.<\/li>\n<\/ul>\n
Agora iremos ao arquivo cep.js<\/em><\/p>\n
$(document).ready(function(){\r\n\t$("input[name=cep]").blur(function(){\r\n\t\tvar cep = $(this).val().replace(\/[^0-9]\/, '');\r\n\t\tif(cep){\r\n\t\t\tvar url = 'https:\/\/viacep.com.br\/ws\/'+cep+'\/json\/';\r\n\t\t\t$.ajax({\r\n url: url,\r\n dataType: 'jsonp',\r\n crossDomain: true,\r\n contentType: "application\/json",\r\n\t\t\t\t\tsuccess : function(json){\r\n\t\t\t\t\t\tif(json.logradouro){\r\n\t\t\t\t\t\t\t$("input[name=rua]").val(json.logradouro);\r\n\t\t\t\t\t\t\t$("input[name=bairro]").val(json.bairro);\r\n\t\t\t\t\t\t\t$("input[name=cidade]").val(json.localidade);\r\n\t\t\t\t\t\t\t$("input[name=uf]").val(json.estado);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\t\t\t\t\t\r\n\t});\t\r\n});<\/pre>\nExplicando o c\u00f3digo acima:<\/p>\n
- \n
- Na linha 1, inicia o jQuery para\u00a0iniciar depois de carregar o DOM;<\/li>\n
- Na linha 2, seleciona input cujo o\u00a0name CEP atribui o evento blur e ser\u00e1 executa uma fun\u00e7\u00e3o, caso clique fora do campo selecionado;<\/li>\n
- Na linha 3, criamos uma vari\u00e1vel cep, <\/strong>que recebe o valor do CEP\u00a0<\/strong>e remove tudo diferente de 0-9, usando replace;<\/li>\n
- Na linha 4, verificamos se tem algum valor na vari\u00e1vel cep para dar continua\u00e7\u00e3o ao\u00a0script;<\/li>\n
- Na\u00a0Linha 5,\u00a0criamos a vari\u00e1vel url que define onde ser\u00e1 feito a requisi\u00e7\u00e3o, passando o CEP para API;<\/li>\n
- Na linha 6 chamamos o evento $.ajax;<\/li>\n
- Na linha 7, definimos a url da requisi\u00e7\u00e3o;<\/li>\n
- Na linha 8, definimos o tipo de dados que voc\u00ea\u00a0espera do retorno, no nosso caso o JSONP;<\/li>\n
- Na linha 9, permitimos o redirecionamento ao realizar a requisi\u00e7\u00e3o;<\/li>\n
- Na linha 10,\u00a0informamos o tipo de conte\u00fado que ser\u00e1 enviado na requisi\u00e7\u00e3o;<\/li>\n
- Na linha 11 a 18, resgatamos o retorno se for com sucesso e atribu\u00edmos a cada item do formul\u00e1rio o valor retornado.<\/li>\n<\/ul>\n
Para ver o funcionamento do script:<\/p>\n