Como usar ajax para enviar um formulário web

Você pode ter lido o nosso guia jQuery, bem como parte cinco do nosso tutorial jQuery em AJAX

, mas hoje eu vou mostrar-lhe como usar AJAX para enviar dinamicamente um formulário web. JQuery é de longe a maneira mais fácil de usar AJAX, então checkout nosso começando tutorial se você é um novato. Vamos saltar para a direita.Um guia básico para JQuery para javascript ProgramadoresUm guia básico para JQuery para javascript ProgramadoresSe você é um programador de javascript, este guia para JQuery vai ajudá-lo a começar a codificar como um ninja.consulte Mais informação

Por que usar AJAX

Você pode estar se perguntando “Por que eu preciso AJAX?” HTML é perfeitamente capaz de formulários apresentação, e faz isso de uma maneira indolor. AJAX é implementado na grande maioria das páginas da web, e sua popularidade continua a subir.

O benefício enorme AJAX traz é a capacidade de carregar parcialmente partes das páginas da web. Isso faz com que as páginas aparecem mais rápido e mais ágil, e economiza largura de banda de apenas ter que recarregar uma pequena porção de dados em vez de toda a página. Aqui estão alguns casos básicos de uso de AJAX:

• Verificar se há novos e-mails regularmente.
• Atualizar uma bola de futebol ao vivo marcar cada 30 segundos.
• Atualizar o preço para um leilão online.

AJAX fornece-lhe, o desenvolvedor, com uma capacidade quase ilimitada de fazer páginas web rápida, ágil e mal-humorado - algo que os visitantes vão agradecer por.

o HTML

Antes de começar, você precisa de um formulário HTML. Se você não sabe o que HTML é, em seguida, ler o nosso guia sobre como fazer um site para iniciantes.Como Fazer um Website: Para IniciantesComo Fazer um Website: Para IniciantesHoje eu vou guiá-lo através do processo de fazer um site completo a partir do zero. Não se preocupe se isso soa difícil. Eu vou guiá-lo em cada passo do caminho.consulte Mais informação

Aqui está o HTML que você precisa:

lt;htmlgt;lt;cabeçagt;lt;roteiro src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" tipo="text / javascript"gt;roteirogt;lt;roteiro tipo="text / javascript"gt;roteirogt;cabeçagt;lt;corpogt;lt;Formato açao="algo / arquivo" método="POSTAR" nome="myForm" identidade="myForm"gt;Nome:lt;entrada tipo="texto" nome="nome"gt;Era:lt;entrada tipo="texto" nome="era"gt;lt;entrada tipo="enviar"gt;Formatogt;corpogt;htmlgt;

Este código HTML define uma forma com alguns elementos. Observe como existem açao e método atributos. Estes definem onde e como o formulário é enviado. Eles não são necessários quando você estiver usando AJAX, mas é uma boa idéia para usá-los, pois garante que os visitantes do seu site ainda pode usá-lo se tiverem javascript desativado. Esta página inclui jQuery hospedado pelo Google em seu CDN. o cabeça contém uma roteiro tag - isto é onde você vai escrever seu código.O que CDNs são & Por Armazenamento não é nenhum mais um problemaO que CDNs são & Por Armazenamento não é nenhum mais um problemaCDNs tornar a Internet rápida e sites acessíveis mesmo quando você escala para milhões de usuários. Em primeiro lugar, os custos de largura de banda dinheiro- aqueles de nós em contratos limitados sabe disso muito bem. Não só você ...consulte Mais informação

Esta forma pode parecer um pouco chato agora, então você pode querer considerar CSS aprendizagem para animar-se um pouco.

o javascript

Há várias maneiras você pode enviar formulários com javascript. O primeiro e mais fácil maneira de fazer isso é através do enviar método:

documento.getElementById(`MyForm`).enviar()-

Pode, claro, direcionar o formulário com jQuery, se você preferir - não faz diferença:

$(`#myForm`).enviar()-

Este comando informa ao navegador para enviar o formulário, exatamente como pressionar o botão enviar. Destina-se a forma pela sua id, e, neste caso, é myForm. Este não é AJAX, por isso vai recarregar a página inteira - algo que nem sempre é desejável.

No método atributo do seu formulário, você especificou como enviar o formulário. Isso pode ser POSTAR ou OBTER. Este atributo não é utilizado aquando da apresentação formas usando AJAX, mas o mesmo método pode ser usado.

Grande parte da web moderna é executado off GET ou POST solicitações. De um modo geral, GET é usado para recuperar dados, enquanto POST é usado para enviar os dados (e retornar uma resposta). Os dados podem ser enviados com GET, mas POST é quase sempre a melhor opção - especialmente para os dados do formulário. Você pode ter visto solicitações GET antes - eles enviam os dados anexados à URL:

Video: Como enviar un Formulario por Correo | PHP

somewebsite.com/index.html?name=Joe

O ponto de interrogação informa ao navegador que quaisquer dados imediatamente a seguir não é para ser usado para percorrer o site, mas deve antes ser repassado para a página para que possa processar. Isso funciona bem para coisas simples, como um número de página, mas tem alguns inconvenientes:

limite máximo de caracteres: Há um número máximo de caracteres que podem ser enviados em uma url. Você pode não ter o suficiente, se você está tentando enviar uma grande quantidade de dados.
Visibilidade: Qualquer um pode ver os dados enviados em uma solicitação GET - não é bom para dados confidenciais, como senhas ou dados do formulário.

solicitações POST trabalhar de uma forma semelhante, só que eles não enviar os dados na URL. Isto significa que uma quantidade maior de dados podem ser enviados (dados é conhecida como um carga paga), E um pouco de segurança é adquirida por não expor os dados. Os dados ainda podem ser facilmente acessados, porém, assim que olhar para um certificado SSL se você quer paz de espírito total.O que é um certificado SSL, e você precisa de um?O que é um certificado SSL, e você precisa de um?Navegar na Internet pode ser assustador quando informação pessoal está envolvido.consulte Mais informação

Se POST ou GET é usado, os dados são enviados em chave -gt; valor pares. No URL acima, é a chave nome, e o valor é Joe.

A melhor maneira de enviar formulários é usar Asynchronous javascript e XML (Ajax). javascript suporta chamadas AJAX, mas eles podem ser confuso para usar. JQuery implementa esses mesmos métodos exatos, mas fá-lo em um fácil de usar maneira. Você pode instruir o seu navegador para executar uma solicitação GET ou POST - stick para POST para este exemplo, mas recebo pedidos são realizados de uma forma similar.

Aqui está a sintaxe:

$.postar(`Some / url`, $(`#myForm`).seriar())-

Este código faz várias coisas. A primeira parte ($) Permite que o navegador sabe que você quiser usar jQuery para esta tarefa. A segunda parte chama a postar método de jQuery. Você tem que passar em dois Parametros- A primeira é a url para enviar os dados para, enquanto o segundo é os dados. Você pode encontrar (dependendo do URL que você está tentando acessar), que seus navegadores de mesma origem política de segurança podem interferir aqui. Você pode ativar o compartilhamento de recursos de origem cruzada para contornar isso, mas simplesmente apontando para um URL hospedado no mesmo domínio que a página é muitas vezes suficiente.

O segundo parâmetro chama o jQuery seriar método no formulário. Este método acessa todos os dados do seu formulário, e prepara-los para a transmissão - ele serializa-los.

Este código é suficiente para enviar um formulário, mas você pode encontrar coisas agir um pouco estranho. É bem a pena investigar suas ferramentas de desenvolvimento do navegador, como estes fazem rede depuração solicita uma brisa.

Alternativamente, carteiro é uma excelente ferramenta gratuita para pedidos de testes de HTTP.

Video: Envio de email por formulário básico ou Ajax com Formspree

Se você quiser enviar seu formulário usando AJAX quando o botão enviar é pressionado, que é tão fácil. Você precisa anexar o código para a enviar evento do formulário. Aqui está o código:

$(documento).em(`enviar`,`#myForm`,função(){$.postar(`Some / url`, $(`#myForm`).seriar())-Retorna falso-})-

Este código faz várias coisas. Quando o formulário é enviado, o navegador vem e executa o código em primeiro lugar. Seu código em seguida, envia os dados do formulário usando AJAX. O passo final necessário é para evitar que a forma original de apresentar - você já fez isso com AJAX, para que você não quer que aconteça novamente!

Se você deseja executar alguma outra tarefa uma vez que o AJAX tenha terminado (ou talvez até mesmo retornar uma mensagem de status), você precisa usar um ligue de volta. JQuery faz com que essas muito fácil de usar - basta passar uma função como um outro parâmetro como este:

$.postar(`Url`, $(`#myForm`).seriar(), função(resultado) {console.registro(resultado)-}

o resultado argumento contém quaisquer dados retornados pelo url os dados foram enviados. Você pode facilmente responder a esses dados:

E se(resultado == `sucesso`) {// fazer alguma tarefa}outro {// fazer alguma outra tarefa}

Isso é tudo para este post. Esperemos que agora você tem uma sólida compreensão de solicitações HTTP, e como AJAX funciona no contexto de um formulário.

Você aprendeu quaisquer novos truques hoje? Como você usa AJAX com formas? Deixe-nos saber seus pensamentos nos comentários abaixo!