Não tenha medo! É bem fácil!
Antes de começar a ler, veja aqui o que é ajax e como ele funciona.
Para começar temos que fazer o nosso html. Vou me ate somente a um caso simples, um formulário que tenha nome e telefone. Para escrever o formulário, siga os padrões da W3C de validação.
Os inputs ficam assim:
<input type=”text” id=”str-nome” name=”str-nome” />
<input type=”text” id=”str-telefone” name=”str-telefone” />
<input type=”button” id=”button-enviar” value=”Enviar”/>
Após importar o jquery começamos a escrever nosso jquery:
$().ready(function(){
$(“#button-enviar”).click(function(){
strNome = $(“#str-nome”).val();
strTelefone = $(“#str-telefone”).val();
$.post(“salvar-contato.php”,
{ nome: strNome, telefone: strTelefone}
);
});
});
Então vamos entender o que acontece. Seguinte a ordem do código:
- Testamos o evento de quanto o $(), ou seja, o document estiver pronto (ready), começamos a executar o jquery
- Escutamos o evento de quando clicarem no botão Enviar
- Quando clicarem no botão executamos algum código
- O nosso código vai pegar o values dos inputs de telefone e nome e vai guardar em variáveis
- Em $.post vamos executar o AJAX. Nessa função post nós setamos para qual é página (“salvar-contato.php”) que vamos enviar os dados de nome e telefone. Nessa função, também, vamos passar o dados, usando um array: “{nome: strNome, telefone: strTelefone}”. Esse array diz que no PHP, ou ASP, o qualquer linguagem que for, você vai acessar os dados através de “nome” e “telefone”. Por exemplo, em PHP você acessaria $_POST['nome']. Lembrando que strNome e strTelefone são os valores pegados pelo .val().
- FIM !
No arquivo PHP que você acessa o banco. Se ainda tem dúvidas, me envie suas perguntas!
