Buscar Cep via webservice javascript

Algumas vezes precisamos em um cadastro de usuário por exemplo, preencher e validar automaticamente alguns campos. Neste post veremos um exemplo com buscador de dados do CEP.

Para buscar cep via webservice com jQuery você poderia criar os campos input text para Cidade, Complemento, Endereço e UF alem do campo CEP. Com estes campos declarados podemos utilizar algum webservice para consulta e obtenção de dados. Existem muitos webservices disponíveis gratuitamente no mercado... no exemplo abaixo utilizarei o Viacep.

Segue código jQuery:


$("#Cep").keyup(function (e) {
            e.preventDefault();
            var cep = $(this).val().replace("-", "");
            if (cep.length == 8) {
                $.getJSON("https://viacep.com.br/ws/" + cep + "/json/", {},
                    function (data) {
                        if (data.ibge) {
                            $("#Cidade").val(data.localidade);
                            //data.bairro;
                            $("#Complemento").val(data.complemento);
                            $("#Endereco").val(data.logradouro);
                            $("#UF").val(data.uf);
                        } else {
                            $("#Endereco").val("Por favor informe um cep correto.");
                        }
                    });
            }
        });

Até a próxima ;)

Comentários

Postagens mais visitadas deste blog

Como criar componente dropdown com checkbox ASP.NET MVC

Neste post irei demonstrar a criação de um componente dropdown com checkbox para selecionar as opções desejadas. Para começar podemos criar uma classe estática para criar o componente que será utilizado numa página razor. public static class Extensions { public static MvcHtmlString DropdownCheckbox( this HtmlHelper helper, string placeholder, IEnumerable<SelectListItem> selectList, object htmlAttributes) { string items = "" ; string rodape = "" ; if (htmlAttributes == null ) { htmlAttributes = new { }; } var attributes = new ExpandoObject() as IDictionary< string , Object>; foreach (PropertyInfo property in htmlAttributes.GetType().GetProperties()) { attributes.Add(property.Name, property.GetValue(htmlAttributes)); } string idDropdown = "dr...

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

Upload de arquivos sem refresh na página

Olá. Algumas vezes temos a necessidade de enviar dados sem dar refresh na página. Mas isto torna-se mais engenhoso quando entre estes dados temos arquivos. Para solucionar este cenário temos uma facilidade com jQuery. Para enviar arquivos é necessário trabalhar com os parâmetros de ajax contentType e processData. No exemplo abaixo temos uma função genérica que servirá tanto para formulário com ou sem imagem: $(form).on('submit', function () { var data; var contentType = "application/x-www-form-urlencoded"; var processData = true; if ($(this).attr('enctype') == 'multipart/form-data') { data = new FormData($(this).get(0));//seleciona classe form-horizontal adicionada na tag form do html contentType = false; processData = false; } else { ...

Jozimar Back's codding blog

Pesquisar este blog