Como usar o AJAX para enviar um formulário da Web

Propaganda

Você pode ter lido nosso guia jQuery Um guia básico para JQuery para programadores JavascriptSe você é um programador Javascript, este guia para o JQuery o ajudará a começar a codificar como um ninja. consulte Mais informação , bem como a parte cinco do nosso tutorial jQuery sobre AJAX Tutorial do jQuery (parte 5): AJAX todos eles!Quando chegamos ao final da nossa série de mini-tutoriais do jQuery, já era hora de analisarmos mais detalhadamente um dos recursos mais usados ​​do jQuery. O AJAX permite que um site se comunique com ... consulte Mais informação , mas hoje mostrarei como usar o AJAX para enviar dinamicamente um formulário da web. O JQuery é de longe a maneira mais fácil de usar o AJAX; portanto, confira nosso tutorial de introdução Tutorial do jQuery - Introdução: Noções básicas e seletoresNa semana passada, falei sobre a importância do jQuery para qualquer desenvolvedor web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... consulte Mais informação se você é iniciante. Vamos pular direto.

Por que usar o AJAX

Você pode estar se perguntando "Por que preciso do AJAX?" O HTML é perfeitamente capaz de enviar formulários e o faz de maneira bastante indolor. O AJAX é implementado na grande maioria das páginas da web e sua popularidade continua a aumentar.

O grande benefício que o AJAX traz é a capacidade de carregar parcialmente partes de páginas da web. Isso faz as páginas parecerem mais rápidas e mais responsivas e economiza largura de banda, bastando recarregar uma pequena parte dos dados em vez da página inteira. Aqui estão alguns casos de uso básicos do AJAX:

• Verifique regularmente novos e-mails.
• Atualize uma pontuação de futebol ao vivo a cada 30 segundos.
• Atualize o preço de um leilão online.

O AJAX fornece a você, desenvolvedor, uma capacidade quase ilimitada de tornar as páginas da Web rápidas, responsivas e ágeis - algo que seus visitantes agradecerão.

O HTML

Antes de começar, você precisa de um formulário HTML. Se você não sabe o que é HTML, leia nosso guia em como criar um site para iniciantes Como Fazer um Site: Para IniciantesHoje vou orientá-lo no processo de criar um site completo do zero. Não se preocupe se isso parecer difícil. Vou guiá-lo através dele a cada passo do caminho. consulte Mais informação .

Aqui está o HTML que você precisa:

 Nome: Era: 

Este html define um formulário com alguns elementos. Observe como existem açao e método atributos. Eles definem onde e como o formulário é enviado. Eles não são necessários quando você usa o AJAX, mas é uma boa ideia usá-los, pois garante que os visitantes do seu site ainda possam usá-lo se o JavaScript estiver desativado. Esta página inclui o jQuery hospedado pelo Google em seus CDN O que são CDNs e por que o armazenamento não é mais um problemaAs CDNs tornam a Internet rápida e os sites acessíveis, mesmo quando você escala para milhões de usuários. Em primeiro lugar, a largura de banda custa dinheiro; aqueles de nós com contratos limitados sabem disso muito bem. Você não apenas ... consulte Mais informação . o cabeça contém um roteiro tag - é aqui que você escreverá seu código.

Este formulário pode parecer um pouco chato agora, então você pode considerar aprendendo CSS 5 etapas do bebê para aprender CSS e se tornar um feiticeiro de Kick-Ass CSSCSS é a página de mudança mais importante na última década e abriu o caminho para a separação de estilo e conteúdo. Na forma moderna, XHTML define a estrutura semântica ... consulte Mais informação para animar um pouco.

O JavaScript

Existem várias maneiras de enviar formulários com JavaScript. A primeira e mais fácil maneira de fazer isso é através do enviar método:

document.getElementById ('myForm'). submit ();

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

$ ('# myForm'). submit ();

Este comando diz ao navegador para enviar o formulário, exatamente como pressionar o botão enviar. Ele segmenta o formulário por seu ID e, nesse caso, é myForm. Como não é AJAX, recarrega 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 PEGUE. Este atributo não é usado ao enviar formulários usando AJAX, mas o mesmo método pode ser usado.

Grande parte da web moderna é executada com pedidos GET ou POST. De um modo geral, o GET é usado para recuperar dados, enquanto o POST é usado para enviar dados (e retornar uma resposta). Os dados podem ser enviados com GET, mas o POST é quase sempre a melhor escolha - principalmente para dados de formulário. Você já deve ter visto solicitações GET - elas enviam os dados anexados ao URL:

someebsite.com/index.html? name = Joe

O ponto de interrogação informa ao navegador que qualquer dado imediatamente a seguir não deve ser usado para percorrer o site, mas deve ser passado para a página para que ele seja processado. Isso funciona bem para coisas simples, como um número de página, mas tem algumas desvantagens:

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

As solicitações POST funcionam de maneira semelhante, apenas elas não enviam os dados no URL. Isso significa que uma quantidade maior de dados pode ser enviada (dados são conhecidos como carga útil) e obtém-se alguma segurança ao não expor os dados. Os dados ainda podem ser facilmente acessados; portanto, procure um Certificado SSL O que é um certificado SSL e você precisa de um?Navegar na Internet pode ser assustador quando informações pessoais estão envolvidas. consulte Mais informação se você quer total paz de espírito.

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

A melhor maneira de enviar formulários é usar JavaScript e XML assíncrono (AJAX). O JavaScript suporta chamadas AJAX, mas elas podem ser confusas de usar. O JQuery implementa exatamente esses mesmos métodos, mas de maneira fácil de usar. Você pode instruir seu navegador a executar uma solicitação GET ou POST - atenha-se ao POST neste exemplo, mas as solicitações GET são executadas de maneira semelhante.

Aqui está a sintaxe:

$ .post ('alguns / url', $ ('# myForm'). serialize ());

Este código faz várias coisas. A primeira parte ($) informa ao navegador que você deseja usar o jQuery para esta tarefa. A segunda parte chama o postar método de jQuery. Você tem que passar em dois parâmetros; O primeiro é o URL para o qual enviar os dados, enquanto o segundo são os dados. Você pode descobrir (dependendo do URL que está tentando acessar) que os navegadores " mesma origem política de segurança pode interferir aqui. Você pode ativar compartilhamento de recursos de origem para contornar isso, basta apontar para um URL hospedado no mesmo domínio da sua página.

O segundo parâmetro chama o jQuery serializar método no seu formulário. Este método acessa todos os dados do seu formulário e os prepara para transmissão - eles os serializam.

Somente esse código é suficiente para enviar um formulário, mas você pode achar as coisas um pouco estranhas. Vale a pena investigar as ferramentas de desenvolvedor do navegador, pois elas facilitam muito as solicitações de rede de depuração.

Alternativamente, Carteiro é uma excelente ferramenta gratuita para testar solicitações HTTP.

Se você deseja enviar seu formulário usando AJAX quando o botão Enviar for pressionado, isso é fácil. Você precisa anexar seu código ao enviar evento do formulário. Aqui está o código:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); retorna falso; });

Este código faz várias coisas. Quando seu formulário é enviado, seu navegador entra e executa seu código primeiro. Seu código envia os dados do formulário usando o AJAX. A etapa final necessária é impedir que o formulário original seja enviado - você já fez isso com o AJAX e não deseja que isso aconteça novamente!

Se você deseja executar alguma outra tarefa após a conclusão do AJAX (ou talvez até retornar uma mensagem de status), é necessário usar um ligue de volta. O JQuery torna isso muito fácil de usar - basta passar uma função como outro parâmetro como este:

$ .post ('url', $ ('# myForm'). serialize (), função (resultado) {console.log (resultado); }

o resultado O argumento contém todos os dados retornados pelo URL para o qual os dados foram enviados. Você pode responder facilmente a esses dados:

if (result == 'success') {// faça alguma tarefa. } else {// faça alguma outra tarefa. }

É isso neste post. Espero que agora você tenha um sólido entendimento das solicitações HTTP e como o AJAX funciona no contexto de um formulário.

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

Créditos da Imagem: vectorfusionart / Shutterstock