Enviando dados do formulário HTML para o PHP usando Ajax sem refresh.
Nos dias de hoje, dificilmente algum formulário é enviado de forma normal. Os dados são enviados via background usando ajax aumentando a velocidade, desempenho e experiência de uso do usuário.
Autor: André Rodrigues
CONTEÚDO
Olá amigos, tudo bem?
Nesse artigo vou ensinar a criar um formulário com envio de dados via background usando AJAX pelo método $.post do Jquery. Nesse artigo não iremos abordar as estruturas de HTML e CSS muito menos boas práticas. Iremos criar um formulário básico e iremos enviar esses dados para um arquivo PHP utilizando o mysqli para salvar no banco de dados.
Vamos começar criando nossa tabela no banco de dados:
mensagem.sql
CREATE TABLE `sistema_financeiro`.`mensagem` ...
Aqui não tem muito segredo, execute esse script mysql que a tabela será criada com os campos.
Agora que temos nossa tabela, vamos criar o arquivo HTML contendo o formulário.
index.php
Coloquei um ID em cada input e um ID no button, como falei, existem várias formas mais eficientes para pegar as informações do input mas não irei abordar aqui.
Vamos criar nosso arquivo javascript que será responsável pelo envio dos dados.
all.js
Aqui não tenho muito a comentar, os principais pontos já estão comentados no código. O método $.post é composto pelos parâmetros:
- Link para onde os dados serão enviados.
- Objeto que será enviado via post.
- Resposta da requisição.
- Tipo de retorno que pode ser xml, json, script, text ou htm (Não está sendo usado aqui).
Você pode usar também os métodos $.get (envia os dados via GET) ou $.ajax (uso mais completo e complexo). Para saber mais, acesse a documentação do $.post, $.get e $.ajax.
Por final, o arquivo que receberá os dados do JavaScript e enviará para o banco de dados.
salvar.php
Aqui fiz apenas uma validação de dados, converti o telefone para apenas número via expressão regular na linha 5 e enviei os dados com mysqli (o mysql foi descontinuado). Lembrando que você deve mudar os dados do banco de dados nas linhas 20, 21, 22 e 23 para as suas.
Pronto pequeno Padawan! Se você seguiu tudo certo, seu formulário vai estar funcionando enviando dados via background usando o Ajax. Qualquer dúvida é só chamar nos comentários. Um abraço! ;)
Quer aprender tudo sobre JavaScript? Clique aqui e veja todos os artigos.