AJAX + JQuery = Facilidade

Abril 27, 2007 on 1:21 pm | In Informatica, php, JavaScript, JQuery, AJAX |

Irei falar sobre método de envio e recebindo através de um form sem dar reload em uma página usando o framework JQuery.

Primeiro criamos o formulário:

PLAIN TEXT
HTML:
  1. form method="post" id="form" action="starterkit.php">
  2. <table width="49%" cellspacing="0" cellpadding="0" border="0">
  4. <td style="width: 33%"><span class="nome">
  5. <label>Nome :</label></span></td>
  6. <td style="width: 67%"><input type="text" id="nome" name="nome" /></td>
  7. </tr>
  9. <td><span class="Apelido"><label>Apelido :</label></span></td>
  10. <td><input type="text" id="Apelido" name="Apelido" /></td>
  11. </tr>
  13. <td><span class="site"><label>Site :</label></span></td>
  14. <td><input type="text" id="site" name="site" /></td>
  15. </tr>
  17. <td><input type="submit" class="envio" value="Enviar" id="submit" name="submit" /></td>
  18. <td><span id="loading"><img alt="Ajax Indicator" src="http://rafaelcunha.com/indicator.gif" /></span>    <span id="result" /></td>
  19. </tr>
  20. </table>

Utilizamos então o método de POST do JQuery para pegar os valores e enviar para um arquivo externo no caso o 'recebe.php':

PLAIN TEXT
JAVASCRIPT:
  1. $('input.envio').click(function() {
  2. $('#loading').show();
  3. $.post('recebe.php',{
  4. nome: $('#nome').val(),
  5. Apelido: $('#Apelido').val(),
  6. site: $('#site').val()
  7. },function(response){
  8. // resposta
  9. $('#result').fadeOut();
  10. setTimeout("finishAjax('result', '"+escape(response)+"')", 400);
  11.  
  12. })
  13.  
  14. return false;
  15. });

Comentários sobre o código:
Quando recebe o click no input classe envio. Ele mostra a div id=loading e depois chama a função de .POST do modulo de AJAX do JQuery.
Logo em seguida ele atribui para valor nome: o valor pego do input id=nome ( $('#nome').val(); e faz o mesmo com todos aqueles valores que irão ser passados por POST para o arquivo recebe.php.
Ele chama a função response que na verdade é a resposta enviada do arquivo recebe.php. No nosso caso se a resposta por 'positiva' mostraremos o dados enviados na tela. Para isso dou settimeout para esperar um pouco e chamo a função finishAjax, passando dentro dela dois valores, o ID onde colocarei o resultado e o resultado de resposta do arquivo recebe.php

PLAIN TEXT
JAVASCRIPT:
  1. function finishAjax(id, response) {
  2. $('#loading').hide();
  3. $('#'+id).html(unescape(response));
  4. $('#'+id).fadeIn();
  5. if (response == 'Inserido'){
  6. $('#todos').fadeOut();
  7. $('#nome').val('');
  8. $('#Apelido').val('');
  9. $('#site').val('');
  10. $.post('envia.php',{
  11. nome: ''
  12. },function(response){
  13. // resposta
  14. $('#todos').html(unescape(response));
  15. $('#todos').fadeIn();
  16.  
  17. })
  18. }
  19. }

Comentário sobre o código acima:

A função testa se a resposta foi 'Inserido' (caso positivo do recebe.php), nesse caso ele atribui a cada valor do formulário o valor vazio com o método $('#nome').val(''); e depois chama o método POST de novo, para enviar e receber os dados necessário para imprimir na tela os valores enviador pelo formulário que ja estão gravados no banco.
Na resposta eu recebo ja os valores de modo que é so fazer a impressão na tela.
Para fazer impressão eu uso o metodo html.(unescape(RESPOSTA)) do JQuery. Escrevo a resposta no span id='todos'.

Recebe.php:

PLAIN TEXT
PHP:
  1. if (isset($_POST['nome'])){
  2. $nome = $_POST['nome'];
  3. }
  4. if (isset($_POST['Apelido'])){
  5. $Apelido = $_POST['Apelido'];
  6. }
  7. if (isset($_POST['site'])){
  8. $site = $_POST['site'];
  9. }
  10. $query=mysql_query("INSERT INTO     Envio_dados (nome,tel,site) VALUES ('".$nome."','".$Apelido."','".$site."')");
  11. if ($query)
  12. echo 'Inserido';
  13. else
  14. echo 'Erro na inserção!';

Envia.php:

SELECT em todos dados da tabela e monta uma tabela de saído com echo. A saída sera exatamento como você formatou este arquivo. Eu não sei porque mas deu problema aqui no blog e não esta mostrando a saída deste arquivo. ;/

Para ler mais sobre as funções e metodos do Jquery so ler a documentação. Para ver o exemplo deste script va em Script Teste.
E é so isso pessoal, dúvidas é comentar... Espero que esse script sirva de inspiração para o uso do JQuery... Até a próxima


31 Comments »

RSS feed for comments on this post. TrackBack URI

  1. O kra. Tipow eu não toh entendendo onde que vai cada script no código. Acho que você deveria ser mais claro quanto a isso ou disponibilizar o download do arquivo para quem não sabe aprender onde fica cada código.

    Comment by Julian Silva — Maio 20, 2007 #

  2. Vamos la...

    Veja o script em http://www.rafaelcunha.com/testes/starterkit.php e veja depois o código fonte, você verá todo o script do JQuery e o formulário, o outros são arquivos externos chamados, envia.php e recebe.php

    Colocado o arquivo para download.

    Abraços

    Comment by silici0 — Maio 20, 2007 #

  3. [...] A pedidos estou disponibilizando o download dos arquivos do post : Ajax + Jquery = Facilidade para que possam identificar melhor os script escritos no tutorial. Basta clicar no link abaixo para fazer o download dos arquivos. AJAX+JQUERY1 [...]

    Pingback by Silici0 :: My LiFe :: » Ajax com JQuery : Download — Maio 20, 2007 #

  4. Vlw kra. Seu blog tem muitas matérias boas.

    Comment by Julian Silva — Maio 20, 2007 #

  5. Obrigado e boa diversão. :)

    Comment by silici0 — Maio 20, 2007 #

  6. Uma unica coisa, como eu faria para apenas imprimir os echos do recebe.php, e não a tabela.

    Comment by Julian Silva — Maio 21, 2007 #

  7. Tabela so tem no arquivo envia.php
    Se você quiser imprimir os echo, basta tirar as TAG html e retirar toda a tabela e colocar os echo $dado.'';
    So mude esse arquivo e rode para testar a saída, acho que você ira compreender melhor depois do retorno dos dados.

    Abraços

    Comment by silici0 — Maio 21, 2007 #

  8. Você diz retirar o segundo javascript? Eu já vih que ele imprime um dos echos caso de erro no mysql. Se eu retirar o segundo javascript que é o que fazer o puxa o envia.php. Tentei fazer mais ele para, não imprime nada. Queria apenas que imprime-se o resultado do mysql.

    Comment by Julian Silva — Maio 21, 2007 #

  9. A função que escreve é o $('#'+id).html(unescape(response));
    Da uma olhada no manual, sobre cada função, melhor para você entender todo funcionamento do script.

    Abraços

    Comment by silici0 — Maio 21, 2007 #

  10. Olá Rafael, gostei do seu blog.
    Conteúdo bem interessante, vou aparecer por aqui sempre.

    Abraço!

    Comment by Renato Carvalho — Maio 24, 2007 #

  11. Obrigado...
    Apareça sim... sua visita é importante para min...
    Abraços

    Comment by silici0 — Maio 24, 2007 #

  12. Muito legal o blog, parabéns.

    Comment by Gustavo — Junho 18, 2007 #

  13. Obrigado...

    Espero que esteja sempre por aqui...

    Abraços

    Comment by silici0 — Junho 18, 2007 #

  14. olá Rafael! Estou utilizando seu exemplo junto com o jqModal para mostrar meus formulários em janelinhas, mas mesmo seguindo todos os seus passos, não consigo o efeito esperado. Meu formulário é submetido, como se não ouvesse evento nenhum associado ao botão submit... então o script ajax não é chamado...

    Será q vc poderia me ajudar?

    Obrigado!

    Comment by Junio — Julho 17, 2007 #

  15. Posso sim, mas seja mais especifico ou me adicione ao msn rafcunha@terra.com.br

    Abraços;

    Comment by silici0 — Julho 17, 2007 #

  16. Cara, muito bom seu texto.

    Muito bem explicado. Comecei a usar Jquery ontem e já consegui rodar meu form de login usando seu exemplo como base.

    E olha que eu to usando Django(framework Python).

    Valeu, Valeu, Valeu, Valeu...

    I'm so happy rigth now!!!

    Comment by Andre — Agosto 9, 2007 #

  17. Legal, continue assim...

    Isso que gera o animo para escrever melhor e novos tutoriais.

    Abraços

    Comment by silici0 — Agosto 9, 2007 #

  18. Singulair (montelukast).

    Singulair (montelukast).

    Trackback by Singulair (montelukast). — Setembro 22, 2007 #

  19. Simples e claro.
    Só gostaria que você disponibilizasse tudo junto. Vou fazer a minha parte então:
    http://dimasgomez.homedns.org/exemplos/jquery_ajax_facilidade_zip.zip

    Dividi os arquivos em pedacinhos de código: js, css, php, inc (phps muito utilizados, essenciais) e bib (arquivos de biblioteca, pra serem usados quando for interessante).

    Espero que a estrutura seja útil pra alguém.

    Abraço,
    Dimas Gomez.

    Comment by Dimas Gomez — Abril 5, 2008 #

  20. Olá parabém pelas excelentes matérias, fantásticas site nos meus favoritos ;)

    Uma questão:
    em localhost não imprime o envia.php, tem alguma coisa haver?

    um abraço

    Comment by nuno — Abril 10, 2008 #

  21. Não tem nada a ver... tem certeza que está chamando o JQuery (framework) junto ?
    Pois o envio depende dele, se quiser para ajudar um alert() com retornos para debugar sempre é bom.

    Abraços

    Comment by silici0 — Abril 10, 2008 #

  22. Olá obrigado pela resposta, curiosamente os teus e os colega que disponibilizou também os ficheiros tem esse problema, estranho, mas não me vou chatear com isso, sim claro que chamei framework antes ;) não sou propriamente um newbee

    um abraço e parabéns mais uma vez! Grande blog!

    Comment by nuno — Abril 10, 2008 #

  23. Na verdade o script esta com um erro, deve ser arrumado, se vc entendeu o funcionamento vai ser facil achar o problema... leia os coments.

    abraços

    Comment by silici0 — Abril 10, 2008 #

  24. qual "coments" os do código ou do blog?
    um abraço

    Comment by nuno — Abril 11, 2008 #

  25. alert(response) Debuga ele... hehehe

    Abraços

    Comment by silici0 — Abril 11, 2008 #

  26. oh nice ok obrigado bom trabalho

    um abraço

    ah e diariamente vou passando aqui ;)

    Comment by nuno — Abril 11, 2008 #

  27. mais uma vez eu, alert(response) INSERIDO :)

    sabes ele insere bem mas só não retorna aquela tabela com os dados, ou seja o envia.php penso eu, ela está funcionar bem já a testei fora e está cool.

    Para ser sincero só a pouco tempo mexo com o jquery.

    php e sql sem problemas mas jquery faço questão de entender visto que todos postam de forma diferente, o que não deixa de ser normal, todos nós programamos de forma diferente :)

    Um abraço mais uma vez e se poderes ser mais claro no que poderá estar acontecer agradecia Alexandre.

    jquery 1.2.3
    Fire 2x
    IE7
    Wamp server php 5.2x
    Apache 2x

    Comment by nuno — Abril 11, 2008 #

  28. Rafael queres indicar o caminho a seguir para detectar o erro?

    ou pelo menos podes fornecer o que está on-line esse funciona, para eu poder analisar e detectar o erro que referiste!

    acho que fiz tudo certinho com o php, mas...

    Obrigado

    Comment by Anonymous — Abril 24, 2008 #

  29. docs.jquery.com

    Veja o funcionamento das funções usadas.

    Abraços

    Comment by silici0 — Abril 24, 2008 #

  30. Acomplia.

    Acomplia. Acomplia rimonabant.

    Trackback by Acomplia. — Abril 29, 2008 #

  31. [...] A pedidos estou disponibilizando o download dos arquivos do post : Ajax + Jquery = Facilidade para que possam identificar melhor os script escritos no tutorial. Basta clicar no link abaixo para fazer o download dos arquivos. AJQDownload Dúvidas é comentar. Abraços e boa diversão. [...]

    Pingback by UniGame» Arquivo do Blog » Ajax com JQuery : Download — Agosto 24, 2008 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>


 

 Assine o feed