21abr

[jQuery] – .serialize()

FILED IN jQuery 7 Comentários

Um dos posts mais visitados no meu blog é o “Ajax com jQuery – $.get, $.post e $.ajax“. Nesse post eu comentei sobre o .serialize() mas não detalhei como funciona esse método pois não fazia parte do escopo. Recebi um e-mail de um leitor pedindo mais explicações sobre a função e achei legal postar para todos! Sem muito “blá blá blá” vou direto ao ponto. Para saber mais sobre .serialize() clique aqui.

HTML:

A primeira coisa que você precisa fazer é criar um form dentro do seu html:

<!-- Lembre-se de colocar a tag name, pois é através
dela que ocorrerá a serialização -->

<form id="formulario" action="">
 <p>Nome <input type="text" id="nome" name="nome" value="" /></p>
 <p>Código <input type="text" id="cd-pessoa" name="cd-pessoa" value="" /></p>
 <p>DDD <input type="text" id="ddd" name="ddd" value="" />
Telefone <input type="text" id="telefone" name="telefone" value="" /> </p>

 <p><input type="button" value="Cadastrar" id="bt-cadastrar" /></p>
</form>

Formulário preenchido:

JavaScript:

Agora vamos enviar os dados para o nosso arquivo JavaScript:

/**
* Obs: Eu não gosto de colocar evento nos meus botões dentro
* do html, por esse motivo que eu estou utilizando o método
* .click(), que faz a mesma coisa. Explicarei melhor em um outro post.
*/
jQuery(function($){
    $('#bt-cadastrar').click(function(){
       cadastrarPessoa();
    });
});

function cadastrarPessoa(){
    var formulario = $('#formulario').serialize();
    alert(formulario);
}

Resposta do alert: nome=Fernando+Valente&cd-pesoa=1&ddd=21&telefone=88888888

Se “pintar” alguma dúvida, escreva que prometo responder o mais rápido possível! Agora é com vocês! :)

Abraços!

, , , , , , , , ,

20out

Ajax com jQuery – $.get, $.post e $.ajax

FILED IN Ajax | jQuery 53 Comentários

Tenho visto muita gente com dúvida em quando usar $.get, $.post e $.ajax (funções Ajax com jQuery) e por isso tentarei explicar cada uma dessas funções da forma mais simples possível para que não haja mais dúvidas. O primeiro passo é saber diferenciar GET de POST:

GET: O método GET é utilizado para capturar valores de variáveis que são enviados ao servidor via Query_String, a qual é concatenada com a url do site. Os dados são lidos com uso da coleção Request.QueryString. O número e tamanho dos valores de campos são limitados.

POST: O método POST é utilizado para capturar valores de variáveis enviadas ao servidor. Os dados são lidos com uso da coleção Request.Form. O número e tamanho dos valores de campos são ilimitados. VANTAGEM: transmite arquivos do disco rígido do cliente ao servidor (upload de arquivo).

Agora podemos dar continuidade. Basicamente a diferença entre os métodos $.get e $.post são as mesmas descritas acima. Ambas são requisições HTTP e tem a mesma funcionalidade, porém nenhuma delas admite callback para erros e acertos, diferente da função $.ajax.

Sintaxe: $.get ou $.post(url, [callback], [tipo]).
Para explicar cada parâmetro dessa sintaxe, vamos ver um exemplo simples. Digamos que você criou um formulário de cadastro de clientes com os campos, nome, cpf e telefone. Com esses dados em mãos, iremos efetuar o cadastro via Ajax utilizando a sintaxe apresentada anteriormente. Vou utilizar o $.post no exemplo.

Obs: Nesse exemplo eu parto do princípio de que quem está lendo tem um conhecimento razoável em javaScript e jQuery e utilizarei o php para recebimento das informações, mas você pode utilizar qualquer linguagem. Não faz parte do escopo desse post o tratamento dos dados recebidos pelo php. Se você possui um pequeno conhecimento e deseja aprofundar mais seus conhecimentos, fica a dica de 2 bons livros do Maujor: jQuery, a biblioteca do programador e Ajax com Jquery.


$.get e $.post:

$.post('cadastroCliente.php', {
    nome: $('#nome').val(),
    cpf: $('#cpf').val(),
    telefone: $('#telefone').val()}, function(resposta){
      //Tratamento dos dados de retorno
    }, "html"
};

Linha a linha
1 – Passamos a url para onde vamos enviar os arquivos digitados pelo usuário.
2, 3 e 4- Data. Aqui colocamos os campos recebidos pela nossa função, no caso desse exemplo utilizei o jQuery para resgatar os dados digitados nos inputs com o $(“#dadosDoCampo”).val() , que equivale ao document.getElementById do JavaScript.
5- Callback. Aqui efetuamos o tratamento do retorno de nossa solicitação que, como dito anteriormente, não entra no escopo desse post. Mas observe que ao final da linha 4 efetuamos a chamada de uma function passando “resposta” como parâmetro. Esse parâmetro pode ser qualquer palavra que melhor represente o callback. Ex: Se o retorno for um xml, você pode colocar function(xml).
6- Tipo de dado que está sendo enviado, pode ser xml, html, script, json, jsonp ou text.

var params = $('form').serialize();
$.ajax({
	//Tipo do envio das informações GET ou POST
	type: 'post',
	//url para onde será enviada as informações digitadas
	url: 'cadastroCliente.php',
	/*
	* Parâmetros que serão carregados para a url selecionada (via POST).
	* o form serialize passa de uma só vez todas as informações que estão
	* dentro do formulário. Facilita, mas pode atrapalhar quando não for
	* aplicado adequadamente a sua aplicação
	*/
	data: params,
	beforeSend: function(){
		/*
		* Ação que será executada após o envio, no caso, chamei um gif
		* loading para dar a impressão de carregamento na página
		*/
		$('#loading').fadeIn(); },
	//function(data) vide item 4 em $.get $.post
	success: function(data){
		//Tratamento dos dados de retorno.
	},
	//Se acontecer algum erro é executada essa função
	error: function(erro){
		$('#loading').fadeOut();
		$('#erroCadastro').fadeIn();
	}
});

E aqui termina a primeira etapa. Alguma dúvida? Deixe um recado que prometo responder o mais rápido possível!

[]´s Fernando Valente

Fonte: iMastersFórum e Site do Maujor

, , , ,

18set

XMLHttpRequest

FILED IN Ajax | Rapidinhas Sem comentários

Post curto e grosso!

=)

Instanciando XMLHttpRequest para todos os Browsers:

function startAjax(){
	var ajax = false;

	if(window.XMLHttpRequest){
		ajax = new XMLHttpRequest();
	}else if(window.ActiveXObject){
			ajax = new ActiveXObject("Msxml12.XMLHTTP");
			if(!ajax){
				//Compatibilidade com IE5 e 6
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}else{
	    alert("O navegador que você está usando não da suporte a essa aplicação!");
	}

	return ajax;

}

Enjoy!

[]´s

Continue Reading

, , , ,

13mai

Ajax com jQuery!

FILED IN Notícias 2 Comentários

Ajax com jQuery

Ajax com jQuery - Maujor

Depois do excelente livro “jQuery A Biblioteca do Programador JavaScript“, Maurício Samy Silva (Maujor) está para lançar seu novo trabalho, “Ajax com jQuery”.  Seu lançamento está previsto para o mês de Julho de 2009,  e tenho certeza que será uma obra de arte, assim como todos os outros livros publicados pelo Mestre!

Sou um pouco suspeito para falar desse novo trabalho, pois sou fã de carteirinha do Maujor.

Acompanhe o Maujor em:
twitter.com/maujor
www.maujor.com.br
www.maujor.com.br/blog

, , ,

10abr

O que é Ajax?

FILED IN Ajax Sem comentários

Esse será o primeiro de muitos artigos referente ao Ajax, mas antes de colocar a mão na massa, digamos assim, precisamos entender o que é e para que serve.

Ajax é a sigla para “Asynchronous Javascript and XML”. Isso significa que, por Ajax, você pode receber a resposta do servidor sem que seja preciso recarregar a página. Se ainda não ficou muito claro, entre no google e repare que quando você começa a digitar algo, o google mostra uma pequena janela abaixo do campo que você esta escrevendo com algumas dicas sobre o assunto desejado. Essa janela, nada mais é do que uma consulta com o banco de dados e retorno imediato sem recarregar o site todo. O intuito disso é tornar as páginas mais amigáveis e interativas para o usuário.

É fundamental entender que AJAX não é uma única tecnologia, são realmente várias tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. Depois dessa pequena introdução, uma dica de leitura é o tutorial “Ajax – Visão Conseitual”, que você pode encontrar no Portal Java, ou clicando aqui.

TOPO