Assine:
Enviando Dados Via Ajax Com Jquery
Plugin jqform
Escrito por CassianoOliver em JavaScript e Ajax. Data: 03/04/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Hoje venho mostrar-lhes como enviar dados via ajax utilizando o plugin jQuery Form do jQuery.
1º passo: incluir o jQuery e o plugin.
2º passo: O formulário
* Sempre usar id ou class nos elementos que serão manipulados pelo jQuery
3º passo: A função para o envio dos dados
Mais parâmetros podem ser usados dentro do options = {} para isso, veja aqui http://malsup.com/jquery/form/#getting-started
4º passo: A página que será requisitada (mostra_nome.php)
Clique aqui para ver o exemplo acima
Simples não?
Bom, mas se o volume de dados for maior? consequentemente demorará mais para serem enviados e como não aparece nada, nenhum aviso enquanto a requisição é feita, o usuário pode achar que nada está acontecendo.
Solução, que tal um "carregando...", "aguarde...", enquando a requisição é feita?
para isso, usamos ajaxStart(), que é executado assim que iniciada a requisição, no nosso exemplo basta colocá-la dentro do submit do formulário, ficando assim:
Clique aqui para ver o exemplo acima
O exemplo em si é simples, mas pode ser usado para formulário de contato, cadastro e etc...
Bom, espero ter ajudado...
abraços!
Referências
Página jQuery
Documentação jQuery
Funções AJAX jQuery
Página do plugin jQuery Form
1º passo: incluir o jQuery e o plugin.
CODE
<script src="js/jq.js" type="text/javascript"></script>
<script src="js/jqform.js" type="text/javascript"></script>
<script src="js/jqform.js" type="text/javascript"></script>
2º passo: O formulário
CODE
<form id="formulario">
<label>Digite seu nome</label>
<input type="text" name="nome" id="nome" />
<button type="submit">Enviar</button>
</form>
// Aqui onde será exibida a resposta da página que será requisitada
<div id="resposta"></div>
<label>Digite seu nome</label>
<input type="text" name="nome" id="nome" />
<button type="submit">Enviar</button>
</form>
// Aqui onde será exibida a resposta da página que será requisitada
<div id="resposta"></div>
* Sempre usar id ou class nos elementos que serão manipulados pelo jQuery
3º passo: A função para o envio dos dados
CODE
<script type="text/javascript">
// Quando o documento for lido
$(document).ready(function() {
// quando o formulário for submetido
$("#formulario").submit(function() {
// opções a serem enviadas pela função
var options = {
target: "#resposta", // destino: onde será exibida a resposta da página requisitada, no caso a div #resposta
url: "mostra_nome.php", // aqui a página que será requisitada
type: "post", // metodo de envio, post ou get
// caso a função tenha sucesso
success: function(resposta) {
// mostra a resposta na div resposta e exibe a div
$("#resposta").text(resposta).show();
}
}
// aqui eu envio os dados com as opções
$(this).ajaxSubmit(options);
// isso é para que o formulário não envio os dados, pois os mesmos serão enviados por ajax
return false;
});
});
</script>
// Quando o documento for lido
$(document).ready(function() {
// quando o formulário for submetido
$("#formulario").submit(function() {
// opções a serem enviadas pela função
var options = {
target: "#resposta", // destino: onde será exibida a resposta da página requisitada, no caso a div #resposta
url: "mostra_nome.php", // aqui a página que será requisitada
type: "post", // metodo de envio, post ou get
// caso a função tenha sucesso
success: function(resposta) {
// mostra a resposta na div resposta e exibe a div
$("#resposta").text(resposta).show();
}
}
// aqui eu envio os dados com as opções
$(this).ajaxSubmit(options);
// isso é para que o formulário não envio os dados, pois os mesmos serão enviados por ajax
return false;
});
});
</script>
Mais parâmetros podem ser usados dentro do options = {} para isso, veja aqui http://malsup.com/jquery/form/#getting-started
4º passo: A página que será requisitada (mostra_nome.php)
CODE
<?php
$nome = $_POST["nome"]; // resgato o valor do input nome(atributo name="nome")
echo "O nome que seu pai e sua mãe te deram é: " . $nome; // Aqui é a famosa resposta tanto citada
?>
$nome = $_POST["nome"]; // resgato o valor do input nome(atributo name="nome")
echo "O nome que seu pai e sua mãe te deram é: " . $nome; // Aqui é a famosa resposta tanto citada
?>
Clique aqui para ver o exemplo acima
Simples não?
Bom, mas se o volume de dados for maior? consequentemente demorará mais para serem enviados e como não aparece nada, nenhum aviso enquanto a requisição é feita, o usuário pode achar que nada está acontecendo.
Solução, que tal um "carregando...", "aguarde...", enquando a requisição é feita?
para isso, usamos ajaxStart(), que é executado assim que iniciada a requisição, no nosso exemplo basta colocá-la dentro do submit do formulário, ficando assim:
CODE
<script type="text/javascript">
// Quando o documento for lido
$(document).ready(function() {
// quando o formulário for submetido
$("#formulario").submit(function() {
// Aqui exibimos um texto na div #resposta assim que a requisição é iniciada
$(this).ajaxStart(function() {
$("#resposta").text("processando...").show();
});
// opções a serem enviadas pela função
var options = {
target: "#resposta", // destino: onde será exibida a resposta da página requisitada, no caso a div #resposta
url: "mostra_nome.php", // aqui a página que será requisitada
type: "post", // metodo de envio, post ou get
// caso a função tenha sucesso
success: function(resposta) {
// mostra a resposta na div resposta e exibe a div
$("#resposta").text(resposta).show();
}
}
// aqui eu envio os dados com as opções
$(this).ajaxSubmit(options);
// isso é para que o formulário não envio os dados, pois os mesmos serão enviados por ajax
return false;
});
});
</script>
// Quando o documento for lido
$(document).ready(function() {
// quando o formulário for submetido
$("#formulario").submit(function() {
// Aqui exibimos um texto na div #resposta assim que a requisição é iniciada
$(this).ajaxStart(function() {
$("#resposta").text("processando...").show();
});
// opções a serem enviadas pela função
var options = {
target: "#resposta", // destino: onde será exibida a resposta da página requisitada, no caso a div #resposta
url: "mostra_nome.php", // aqui a página que será requisitada
type: "post", // metodo de envio, post ou get
// caso a função tenha sucesso
success: function(resposta) {
// mostra a resposta na div resposta e exibe a div
$("#resposta").text(resposta).show();
}
}
// aqui eu envio os dados com as opções
$(this).ajaxSubmit(options);
// isso é para que o formulário não envio os dados, pois os mesmos serão enviados por ajax
return false;
});
});
</script>
Clique aqui para ver o exemplo acima
O exemplo em si é simples, mas pode ser usado para formulário de contato, cadastro e etc...
Bom, espero ter ajudado...
abraços!
Referências
Página jQuery
Documentação jQuery
Funções AJAX jQuery
Página do plugin jQuery Form
Mais recentes em JavaScript e Ajax
- Select dinâmico de estados e cidades
- Por DGmike - Uma das dúvidas mais comuns para quem está começando...
- Selecionar dinâmicamente um option de um select
- Por Manito - Dica para quem fizer um form usando ajax...
- Validador de fomulários v0.1 rc0 beta alpha
- Por PXzin - [versÃo de teste em jquery]...
- Como bloquear imagens do site
- Por Lucasbr - E ai galera, blz? - se que é impossivel proteger realmente...
- Validador de formulário
- Por carlosmborgesjr - Boa tarde, - cara, seu validador ficou muito bom, muito...
Ver mais Artigos de JavaScript e Ajax.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
Micox disse:
ecotuba disse:
Sou novo aqui (meu primeiro post, e já é uma dúvida)
Usei o seu code como citou no site, tudo OK, mas ai usei SpryValidation para validar os campos e rolou uma coisa estranha.
Fiz uma page que recebe os post do form, ai ele envia um email e retorna uma resposta ao internauta, sempre fazia uma pagina form.htm e uma envia.php que exibi a resposta, quis fazer como teu metodo e exibir a resposta na mesma pagina, mas por algum motivo para mim desconhecido as $ retornam vazia, olha aqui o que estou dizendo:
http://pcitamambuca.com.br/contato2.php
Testem enviar vazio para verem a validação e depois completo, que é quando as $ passam vazias na div resposta.
Alguém pode me ajudar.
Grato
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).