como enviar formulários AJAX com JQuery

como enviar formulários AJAX com JQuery

introdução

o jQuery pode ser emparelhado com o envio de formulários para lidar com a validação. Isso tem o benefício de fornecer aos usuários feedback sobre quaisquer erros em sua entrada.

gif animado representando um usuário preenchendo entradas em um formulário e recebendo uma mensagem de sucesso.

neste tutorial, você será presenteado com um formulário de amostra que se comunica com um back-end PHP. O formulário usará o jQuery para processar um formulário sem uma atualização de página (usando AJAX), indicar quaisquer erros e também exibir uma mensagem de sucesso.

pré-requisitos

para concluir este tutorial, você precisará:

  • este tutorial assume que você tem PHP instalado localmente e é capaz de executar o servidor web embutido. Você pode consultar um de nossos tutoriais para instalar o PHP em seu ambiente.
  • alguma familiaridade com seletores e métodos da biblioteca jQuery.
  • alguma familiaridade com as classes da Biblioteca Bootstrap.
  • um editor de código.
  • um navegador moderno.Nota: Este tutorial não especifica as versões mais recentes do jQuery (atualmente 3.5.1) ou Bootstrap (atualmente 5.0.0-beta1). No entanto, muitas das lições deste tutorial ainda pertencem às versões mais recentes.

    este tutorial foi verificado com PHP v7. 3.24, jQuery v2.0.3 e Bootstrap v3.0.3.

    Passo 1-Construindo o back-end com PHP

    para os fins deste tutorial, o back-end será escrito em PHP.

    primeiro, abra uma janela de terminal e crie um novo diretório de projeto:

    • mkdir jquery-form-validation

    navegue até este novo diretório de projetos:

    • cd jquery-form-validation

    em seguida, use seu editor de código para criar um novo processo process.php:

    .php
    <?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data);

    este arquivo terá valores para name, emaile superheroAlias. Se algum desses valores não for fornecido, uma mensagem de erro será enviada de volta. Muitas outras validações podem ser realizadas neste momento, mas para os fins deste tutorial, você só garantirá que essas entradas necessárias tenham sido fornecidas. Caso contrário, se um valor para name, email e superheroAlias estiverem presentes, uma mensagem de sucesso será enviada de volta.

    Nota: Em um cenário do mundo real, o back-end também seria responsável por outras tarefas, como pegar os dados e Salvar alterações em um banco de dados, criar uma sessão ou enviar um e-mail.

    agora que você tem o processamento do formulário preenchido, você pode criar o formulário.

    Passo 2 — Construindo o Frontend com HTML e CSS

    para os fins deste tutorial, o Bootstrap será usado para construir as visualizações.

    no diretório do projeto, use seu editor de código para criar um arquivo index.html:

    índice.html 
    <!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html>

    a versão CDN (content delivery network) do Bootstrap e jQuery será referenciada. O action do formulário será definido para o arquivo PHP que foi criado anteriormente. O formulário consistirá em campos para name, email e superheroAlias. O formulário também precisará de um botão enviar.

    Abra uma janela de terminal e navegue até o diretório do projeto. E execute o servidor PHP:

    • php -S localhost:8000

    visite localhost:8000 no seu navegador da web e observe o seguinte:

    captura de tela de um formulário com campos para nome, e-mail e Alias de super-heróis.

    agora que você tem o formulário preenchido, você pode criar o script para lidar com o envio do formulário.

    Etapa 3-manipulação de Formulário enviar lógica em JavaScript e jQuery

    para enviar um formulário via AJAX, seu script precisará lidar com quatro tarefas:

    • Capture o botão Enviar formulário para que a ação padrão não ocorra.
    • obtenha todos os dados do formulário usando jQuery.
    • envie os dados do formulário usando AJAX.
    • exibir erros se houver algum.

    no diretório do projeto, use seu editor de código para criar um novo form.js arquivo:

    formulário.js
    $(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); });});

    este código recupera os dados dos Campos name, email e superheroAlias. Em seguida, ele executa uma solicitação AJAX para process.php com uma carga útil de dados de formulário. Após uma conexão bem-sucedida, o console registrará os dados de resposta. event.preventDefault() é usado para impedir que o formulário se comporte por padrão recarregando a Página no envio.

    depois de salvar suas alterações em form.js, revisite o arquivo index.html com seu editor de código. Adicione uma referência ao novo arquivo JavaScript:

    índice.html
    <!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->

    agora, quando um usuário pressiona o botão Enviar no formulário, o código JavaScript recuperará todos os valores de entrada e enviará uma solicitação POST para process.php.

    Nota: você usará o retorno de chamada .done para lidar com uma solicitação AJAX bem-sucedida. Isso costumava ser chamado .success, mas desde então foi descontinuado no jQuery 1.8+.

    outra alternativa é usar serialize em vez de puxar as informações do formulário individualmente.

    o script PHP processará as entradas que a chamada AJAX enviou e retornará a matriz $data criada. Você pode observar isso no console do seu navegador depois de enviar seu formulário:

    captura de Tela Do Console Web DevTools no navegador exibindo os dados retornados ao enviar um formulário-success: true, message: Success!

    agora que você tem a lógica do formulário concluída, você pode criar o script para lidar com erros de formulário.

    Etapa 4-exibindo erros de Validação de formulário

    no script PHP, o código verifica para garantir que todos os campos sejam obrigatórios. Se um campo não estiver presente, um erro será enviado de volta.

    revisite form.js e adicione as seguintes linhas de código destacadas:

    formulário.js
    // ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '<div class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ...

    este código verifica se a resposta contém um erro para cada campo. Se um erro estiver presente, ele adiciona uma classe has-error e adiciona a mensagem de erro.

    agora, revisite seu formulário em um navegador da web e experimente enviar dados com o formulário.

    se houver algum erro que volte do servidor, o formulário fornecerá feedback sobre os campos obrigatórios:

    captura de tela do formulário de exemplo que descreve erros para campos de entrada de nome, e-mail e alias de super-heróis.

    e se não houver erros que voltem do servidor, o formulário fornecerá feedback para um envio bem-sucedido:

    captura de tela do formulário de exemplo que descreve uma mensagem de sucesso.

    cada vez que enviamos o formulário, nossos erros de nosso envio anterior ainda estão lá. Você precisará limpá-los removendo-os assim que o formulário for enviado novamente.

    revisite form.js e adicione as seguintes linhas de código destacadas:

    formulário.js
    // ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...

    este código removerá a classe has-error de todos os elementos .form-group. Ele também removerá todos os elementos .help-block com mensagens de erro.

    Etapa 5-exibindo erros de conexão do servidor

    se houver um erro ao conectar-se ao servidor, não haverá resposta JSON da chamada AJAX. Para evitar que os usuários esperem por uma resposta que nunca chegue, você pode fornecer uma mensagem de erro para falhas de conexão.

    revisite form.js e adicione as seguintes linhas de código destacadas:

    formulário.js
    // ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '<div class="alert alert-danger">Could not reach server, please try again later.</div>' ); });// ...

    Se o servidor estiver quebrado ou por qualquer razão, um usuário que tenta submeter um formulário irá obter uma mensagem de erro:

    Screenshot do formulário de exemplo mostrando uma mensagem de erro de ser incapaz de alcançar o servidor.

    agora que você tem a mensagem de erro do servidor concluída, você completou o formulário de exemplo.

    usando $.post em vez de $.ajax

    jQuery também fornece um $.post método abreviado como uma alternativa para $.ajax.

    o código $.ajax em form.js pode ser reescrito com $.post:

    $.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here });

    a vantagem de $.post é que não requer tanta configuração de conexão a ser declarada.

    conclusão

    neste artigo, você construiu um formulário de amostra que se comunica com um back-end PHP com jQuery e exibe quaisquer erros no formulário.

    como próximo passo, você desejará explorar validações mais complexas, como endereços de E-mail e datas válidos. Você também pode estar interessado em Aplicar validações do lado do cliente que funcionam no navegador.

    se você quiser saber mais sobre JavaScript, confira nossa página de tópicos JavaScript para exercícios e projetos de programação.

Leave a Reply

O seu endereço de email não será publicado.