Enviar formulário sem página de página - php/jQuery

Ao enviar um formulário, os usuários esperam uma experiência perfeita para o usuário. Até a menor interrupção na experiência de navegação pode levar a uma queda na taxa de conversão. Suponha que seu site tenha vários pequenos formulários que exigem que os usuários inseram detalhes pessoais, endereços e outras informações confidenciais. Nesse caso, você precisa considerar a implementação dos recursos de validação do AJAX e automóveis para reduzir o risco de os usuários perderem seus dados.

Esta postagem do blog ensinará como criar um formulário de Ajax sem atualização de página com php e jQuery. Você também poderá implementar recursos do AutoSave para os visitantes do seu site e ver exemplos de como as práticas recomendadas podem ser implementadas em cenários da vida real. Vamos começar!

1. Página da web principal

Criar e índice.html Arquive em seu site usando o seguinte conteúdo. Este é o principal formulário HTML que será exibido na página do site. Você pode simplesmente integrar um formulário em qualquer página do site.

 Enviar formulário sem página de página - php/jQuery - Tecadmin.Nome da rede: 
 E-mail: 
 Telefone não:
 Gênero Masculino Feminino
   
 Seus dados serão exibidos abaixo… 
 ==============================
      

2. Crie JavaScript

Agora crie uma página JavaScript com nome enviar.JS dentro JS diretório usando o seguinte conteúdo. Você pode otimizar este JavaScript adicionando as validações jQuery.

função submitformData () var name = $ ("#nome").val (); var email = $ ("#email").val (); VAR Phone = $ ("#telefone").val (); var gênero = $ ("entrada [tipo = rádio]: verificado").val (); $.post ("Envie.php ", nome: nome, email: email, telefone: telefone, gênero: gênero, function (dados) $ ('#Resultados').html (dados); $ ('#myform') [0].reiniciar(); );  

3. Crie script PHP

Agora crie um script php nomeado enviar.php. Este script fará todas as suas operações apoiadas. Quando enviarmos o formulário da web, este script receberá todos os argumentos da postagem. Você pode personalizar esse script de acordo com seus requisitos, como economizar valores no banco de dados, registros de email para admin, etc.

"; eco $ _post ['email'] ."
"; eco $ _post ['telefone'] ."
"; eco $ _post ['gênero'] ."
"; eco" ==================================
"; eco" todos os dados enviados com sucesso!"; ?> 

4. Teste

Agora acesso índice.html página no navegador da web e teste este exemplo. Você também pode ver esta demonstração.

Conclusão

Os formulários AJAX são uma parte essencial do desenvolvimento moderno de aplicativos da web e podem ser usados ​​para melhorar a experiência do usuário, diminuindo o tempo necessário para enviar dados. A tecnologia por trás do Ajax Forms progrediu bastante nos últimos anos, especialmente com o advento de estruturas JavaScript mais poderosas que fornecem funcionalidade adicional e facilidade de uso. É importante observar que os benefícios do uso de um formulário de Ajax não se limitam a sites. De fato, os mesmos conceitos podem ser aplicados para criar um aplicativo móvel com uma interface de usuário responsiva. É por isso que é importante entender o básico de criar uma forma de Ajax e as vantagens que acompanham.