Bem, já mostrei como fazer uma simples requisição pelo objeto httprequest. Agora vou mostrar algo um pouco mais complexo.

A maioria dos leitores chegam ao blog através de busca no Google por Ajax. Realmente todos querem saber técnicas de como fazer tarefas que antes era feita sem esta tecnologia e que com o Ajax a coisa fica um pouco mais complexa. Mas no final fica mais bonito também 🙂

Vou mostrar como inserir valores em um banco de dados e mostrar na tela sem reload na página. Tenho certeza de que tem outras maneiras de fazê-lo, talvez mais eficaz e mais completa, mas neste exemplo irei mostrar uma requisição mais “apurada” em relação ao primeiro post sobre ajax e assim dará continuidade a uma série de posts, pois é um assunto muito amplo, principalmente quando entra o XML e JSON que são os intermediários para que tudo aconteça perfeitamente.

Antes de tudo há um grande dilema que me atormentou e que foi discutido em vários fóruns e sites. Como passar as variáveis do formulário por Javascript? Se vamos trabalhar com Ajax utilizando o Jquery, sem ter nenhuma marcação javascript no HTML, como essas variáveis serão passadas? Neste caso mais simples, eu utilizei o método value() que pega o valor do formulário. Mais uma vez há outras maneiras, mas para este fim ela preenche bem para o que estou querendo ilustrar.

Primeiro vamos mostrar o arquivo principal. Ele mostra valores de um banco de dados mostrado em uma lista não ordenada(ul). A tabela possui apenas um campo id e o outro dados que é output no browser. Logo abaixo há um campo de texto e um botão de adicionar valores. Quando o botão é clicado, o valor é adicionado no banco, então uma mensagem e o campo adicionado aparecem com um fade do Jquery. Tudo isso sem reload na página.

Ajax com o Jquery, atualizando valores no banco de dados sem atualizar a página.

Abaixo o código Jquery

$(document).ready(function(){
  $('input.btn_enviar').click(function(){
  var nome_post = $('.nome').val();
  $.post("request.php",{nome: nome_post},function(data){
    $("p").remove();
    $("ul").after("
	
  • " + data + "
  • ").next().fadeIn("slow"); $("ul li:last").after("
  • " + nome_post + "
  • " ).next().fadeIn("slow"); }); return false; }); });

    Primeiro há a função do Jquery que executa todo código dentro dela depois do DOM ter carregado todos os elementos com sucesso. Depois ele especifica uma função que será executada ao clicar o elemento com a classe btn_enviar que é um botão input de adicionar na página de exemplo.

    Ao se clicar neste botão o valor do input será passado para a variável nome_post através do método val que retorna uma string com o valor do campo.

    Depois é chamado o método $.post que faz uma requisição através do objeto httprequest de uma maneira simples. Os parâmetros passados são a página(request.php), as variáveis(que será a passada pelo formulário) e a função callback que vulgarmente falando diz o que fazer com o conteúdo retornado que está armazenado na variável data.

    Dentro desta função de callback ele apaga o conteúdo que está dentro do p inicialmente (para não ficar repetindo vários parágrafos de confirmação da inclusão). Insere a tag p depois do ul através do método after. No conteúdo desta tag está o dado retornado, que é a mensagem de adicionado com sucesso caso tenha adicionado, ou não foi possível adicionar se ocorreu algum erro. O método next junto com o fadeIn especifica que o elemento após o ul( que é o parágrafo que foi inserido pelo método after) irá aparecer com um efeito de fadeIn.

    Agora vem a parte de inserir por Jquery mais um item na lista, que foi recentemente adicionado pelo banco. Através da seleção do CSS3 last, pegamos o último li do elemento ul com a sintaxe $(“ul li:last”) e inserimos mais um elemento li que irá conter o valor pego pelo input e irá ser exibido com o fadeIn do Jquery.

    O return false aparece para que o botão não envie os dados por post e recarregue a página, ou seja, retira o comportamento padrão do botão.

    O arquivo request.php pega o dado passado pelo método $.post, inserido no formulário pelo usuário, adiciona no banco de dados e dependendo da situação retorna um valor de sucesso ou de falha, informação que é manipulada pelo Jquery para mostrar ao usuário.

    Arquivo request.php:

    $nome = $_POST['nome'];include('global.php');
    
    $db = conectar();
    
    $query_adiciona = "INSERT INTO dados(id,nome)
    values(null,'$nome')";
    
    mysql_query($query_adiciona,$db);
    
    $afetados = mysql_affected_rows();
    
    if($afetados!=-1) {
    
    echo "adicionado com sucesso!";
    
    }
    
    else {
    
    echo "nao foi possivel adicionar ao banco";
    
    }

    No arquivo global.php está incluinda uma função chamada conectar, onde está passado os dados do banco.

    Assim, fizemos uma inserção no banco e retornamos uma string. Isto é um pouco mais avançado que o primeiro post do assunto, mas ainda muito trivial. A “sofisticação” entra quando trabalhamos com XML, pois nele você não retorna somente um valor, mas sim uma coleção de valores. Com o Jquery e suas capacidades de navegar no documento, principalmente pelo Xpath, você pode manipular o XML e fazer o que for preciso.

    O lado negativo deste método é que após a inserção não estamos visualizando o banco de dados, pois o dado inserido foi colocado através do Jquery e o que aparece na tela não é os dados retornados pelo banco atualizados. Creio que isto seja possível com o XML e irei postar na terceira parte.

    Como disse anteriormente, há outros métodos e gostaria que se tiverem idéias, por favor, comentem.

    10 Replies to “Ajax com o Jquery – Parte 02”

    1. Muito obrigado pelo elogio Kerensky, fico lisonjeado e isto só me anima a tentar sempre fazer o melhor…

      Estes exemplos cara podem ser copiados e colados, analisados o código fonte da página de exemplo. dessa forma acho que quem está praticando pode pegar melhor, mas os scripts e o css geralmente coloco no blog mesmo, cut n paste buddie heehhehe… abraços, se precisar é só falar.

    2. Olá, estou acompanhando seus posts sobre Jquery.
      Preciso fazer que quando o usuário submeta um formulario (com as variaveis $altura e $peso, seja carregada um gif carregando e neste mesmo tempo submeta as variaveis para o arquivo “imc.php” e depois devolva o resultado para a página.
      Estou me baseando nos seus exemplos, mas não estou conseguindo fazer funcionar.
      Você tem alguma dica, post para poder entender esta função que quero implementar?
      Parabéns pelos artigos.

      Marcelo Costa

    3. Aqui nesse código:
      .post(“request.php”,{nome: nome_post},function(data){
      $(“p”).remove();
      $(“ul”).after(”
      ” + data + ”
      Eu acho que você quis colocar
      ” + data + “

    4. Vixe.. escondeu as tags.. mas é assim, ao invés de usar “LI”, você deveria usar “P”, na parte que recebe os dados através da variável “data”

    5. Olá!

      Este foi o melhor e mais completo site que já encontrei sobre Jquery e afins! Você está de parabéns! Tudo muito bem explicado simples e direto! Perfeito! Parabéns novamente pela sua bela iniciativa!

      Bem, mas eu tenho uma dúvida que ainda não solucionei e acredito que você com seu conhecimento poderia me ajudar, e até daria idéias para seus desenvolvimentos.

      Eu utilizo PHP, e que acontesse é o seguinte, eu tenho um cliente “site1”, e tenho meu site (site2), daí eu gostaria de que toda a validação e processos fossem efetuados pelo site2, e agravação do resultado no site1. Assim o o código fonte da validação ficaria protegido de cópias e até mais seguro, já que somente eu teria acesso.

      O mais importante deste processo é acontesser de forma transparente, sem “visivelmente” sair do site1 para o site2, ou mostrar na url o endereço do site2.

      Em suma, acontesseria o seguinte:

      1) No site1 há o formulário com digamos 31 questões, que serão enviadas para validação no site2.
      2) No site 2 é recebido as informações do site1, processadas, verificadas e alteradas para transformar no que preciso.
      3) Seria enviado uma resposta para o site1 de sucesso ou no caso de falhas, mostraria os campos incorretos.
      4) No caso de tudo certo, é preciso enviar para o site1, as informações processadas (que neste ponto já estão alteradas da original) para o cliente ver como ficará o registro pronto.
      5) Visto as informações já prontas, é em outra página gravado no BD do cliente.

      A minha dúvida é como fazer um site1 obter a resposta do processameto realizado no site2. Até agora não encontrei solução de como receber os dados de volta. Com Jquery há como receber dados de um outro site externo? Ou só pelo php já dá para fazer isto? Não preciso de um tutorial, ou um código fonte, apenas um ponto de início para eu comessar.

      Muito obrigado por tudo.
      Manoel Jr.

    6. @Manoel: Muito obrigado pelos elogios, fico muito feliz de saber que o conteúdo está sendo útil. Não sei dizer se a maneira como você está querendo fazer é a correta, mas como você pediu gostaria de dizer que se for usar ajax ele não é cross-domain, ou seja, fazer requisições para domínios externos. O que você pode fazer é um script php no mesmo domínio que busca informações compartilhadas e devolva os dados necessários. Espero ter ajudado e um grande abraço. Boa sorte…

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *