Webpoint

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.