11

Se eu tiver um formulário gigante de questões, mandar via AJAX é a melhor forma?

<form id="formulario" method="POST">
    <!--vários Questionarios aqui-->
</form>

JavaScript:

$.ajax({
    type: "POST",
    data: $("#formulario").serialize(),
    url: "algumaurl.php",
    success: function(resposta){
       alert(resposta);
    }
});

No URL algumaurl.php teria um update em um determinado id e dentro desta página teria um echo de resposta (Erro na conexão ou OK).

    success: function(resposta){
       if(resposta== "Erro na conexão"){
           alert("Erro ao inserir dados");
       } else if(resposta== "OK"){
           alert("Formulario ok");
           window.location = "https://www.youtube.com";
       }
    }

Se eu fizer usando action="algumaurl.php" terei problemas se o formulário já estiver preenchido (perderei todos os dados posteriormente preenchidos) em caso de erro, não é?

$update = mysql_query("UPDATE tabela set nome=\"algo\" WHERE ID=$id");

if($update === false){   
    $mensagem ="Erro na conexão";
    header("location: ../pagina-2.php?mensagem=$mensagem");
} else{
    $mensagem ="OK";
    header("location: https://www.youtube.com");
}
3
  • Minha resposta é: Você decide. rsrsrsrsrs Commented 7/10/2015 às 19:33
  • 1
    @WallaceMaxters E a minha é, O cliente decide. :D
    – Caffé
    Commented 9/10/2015 às 15:54
  • Em tempo: quando eu digo "cliente" eu não me refiro só ao Seu Zé dono da padaria. Cliente de software pode ser uma entidade complexa com muitas formas possíveis - se este for o caso, tomar decisões por ele pode resultar em complexidade desnecessária, atraso, prejuízo, desperdício e outras mazelas.
    – Caffé
    Commented 14/10/2015 às 16:15

2 Respostas 2

14

Não existem casos claros onde deve ou não usar. Depende da experiência que você quer dar ao usuário.

Antes de mais nada, um dos erros mais comuns, mas muito comum mesmo, que eu vejo nas aplicações que usam AJAX ou outras tecnologias semelhantes é que não há um fallback. Ou seja, se por alguma razão a tecnologia não estiver disponível, a página não funciona. A primeira coisa que deve se preocupar é se o envio com HTML simples está funcionando perfeitamente em todas as situações. Depois pense em dar uma experiência um pouco melhor se ele estiver disponível. Mas não deixe a página parar de funcionar porque o navegador não suporta a tecnologia.

Embora seja gosto, eu acho que esta técnica vale até mesmo quando o fallback não é exigido pelo cliente, onde pode-se garantir que o recurso está disponível. Acho que o custo é muito baixo e evita um monte de dor de cabeça futura. É uma questão de metodologia e organização. O custo da desorganização costuma ser maior. Claro que a experiência de cada um fará escolher o melhor caminho.

Não sou contra quem não quer fazer o fallback quando ele não é realmente necessário de acordo com os requisitos. Só acho um caminho pior e mais desvantajoso. E o cliente nem sempre tem razão. Na maior parte das vezes eu decido por ele. Ele decide quando ele tem conhecimento, é razoável ou eu preciso do dinheiro :P Você fará o que for mais adequado para você.

Funcionamento do AJAX

A única grande vantagem que o AJAX traz é que não precisa carregar outra página, ou a mesma outra vez, para enviar os dados e ter uma resposta. Isto é feito de forma transparente para o usuário. Dá uma impressão melhor, costuma ser mais rápido (já vi gente conseguir deixar mais lento) e pode reduzir o volume de dados trafegado. Mas nada muito importante. A experiência é que conta mesmo.

Eventualmente o script PHP que receberá a requisição precisa ser adaptado para atender a necessidade do AJAX, mas não mude de forma que inviabilize o acesso normal. Se for o caso, crie dois scripts, um para atender o formulário por envio normal gerando uma página completa e outro mandando só os dados de confirmação que a operação foi bem-sucedida e informar algo mais que seja relevante. Se souber fazer o trabalho é quase o mesmo.

Vantagem no seu caso

Mandar cada questão respondida realmente pode ser bem interessante.

A perda ou não dos dados dependerá do seu script PHP saber manipular isso. Ele terá que persistir em algum lugar (banco de dados, memória, etc.), ter controle da sessão, etc. Terá que controlar o estado do formulário não estar completamente preenchido, ter políticas de coleta de lixo se um formulário for abandonado no meio. Enfim, tem várias coisas para pensar se quiser dar uma experiência boa ao usuário.

Já imaginou se houver algum problema no momento do envio e não tiver AJAX? A perda é enorme. Com o AJAX feito do jeito que está pensando, ou aproveita a parte de já foi feita, ou impede o usuário continuar perdendo seu tempo em algo que servirá para nada.

Isso tudo é complicado, ter um fallback é simples. Por isto muitos sites preferem nem ter AJAX. O custo de colocar este recurso do jeito certo aumenta, mas aí quem paga o custo é o usuário que terá uma experiência bem pior.

Se estiver fazendo algo real, mesmo que para testes ainda, e for tendo dúvidas específicas, você pesquisa se já tem aqui ou pergunte.

Coloquei no GitHub para referência futura.

12
  • 1
    Eu não entendo suficientemente bem de Ajax para interpretar apropriadamente o que você quer dizer com "a tecnologia não estiver disponível". De todas as formas, do ponto de vista de UX, concordo essencialmente com a sua resposta. No cenário exemplificado, o usuário deveria ser avisado previamente no caso de alguma indisponibilidade para que não tenha o trabalho de preencher o longo formulário inutilmente (algo péssimo para a experiência). Commented 14/10/2015 às 12:18
  • 1
    Caso essa detecção prévia da indisponibilidade não seja possível, os dados devem ser mantidos de qualquer forma disponível (cookies, sessão, o que der). A ideia de fazer as questões serem respondidas uma a uma também é boa, porque dilui o trabalho percebido pelo usuário, e um erro com perda de dados se torna menos impactante. Commented 14/10/2015 às 12:19
  • 1
    @LuizVieira Em geral é possível detectar que um recurso está disponível. E dá até para resolver de outra forma quando ela não está disponível de forma transparente para o usuário. Melhorei e coloquei link para falar sobre isto. Quando eu respondi não tinha a tag UX e não sei se o AP queria isto, mas já que tem, fui mais por esse caminho.
    – Maniero
    Commented 14/10/2015 às 12:48
  • 1
    @LuizVieira Basicamente todos os browsers suportam Ajax e apenas versões antigas, que possuem inclusive problemas de segurança e são pouco utilizadas, é que podem não possuir suporte. Eventualmente o cliente pode desativar a execução de JS e isso faria o Ajax e muitos outros recursos de usabilidade pararem de funcionar. JS hoje é relativamente seguro e desativá-lo é uma prática incomum. Uma Single Page Application usa JS e Ajax pesadamente, sendo algumas vezes quase 100% construída usando JS. Ou seja: em muitos cenários, garantir o funcionamento do App com e sem Ajax é altamente custoso.
    – Caffé
    Commented 14/10/2015 às 14:21
  • 1
    @LuizVieira Já a verificação de que o JS foi desativado é bastante simples e barata - podemos dizer que "não custa nada" verificar se o browser é ponto fora da curva antes de deixar o usuário perder tempo; e, no caso de o JS ter sido desabilitado, avisar e interromper o funcionamento do app. Isto tem custo relativamente baixo (nada comparado a funcionar também sem JS/Ajax em aplicativos rich client).
    – Caffé
    Commented 14/10/2015 às 15:15
5

A pergunta possui uma certa ambiguidade pois o título dá uma noção de se tratar de um tema mais amplo e genérico referente ao uso de ajax.

Todavia, o contexto traz um problema específico que é manter a salvo os dados que o usuário enviou mesmo que ocorra um erro e haja redirecionamentos.

Considerando o contexto, é possível manter os dados entrados pelo usuário em variáveis de sessão ou cookies.

Como exemplo, action="algumaurl.php".

Na página "algumaurl.php", que receberá os dados (GET/POST), salve toda a informação recebida sem variáveis de sessão.

Exemplo:

<?php

/**
Inicia o uso de sessões.
*/
session_start();

/**
Os dados digitados pelo usuário serão salvos nessa sessão:
*/
$_SESSION['formulário_x'] = $_POST;

/**
Abaixo continua os seus scripts normalmente.
*/

Na página do formulário (pagina-2.php), adicione condicionais que verifiquem se há uma sessão presente.

Exemplo

<input type="text" name="nome_do_campo" value="<?php isset($_SESSION['formulário_x']['nome_do_campo']){echo $_SESSION['formulário_x']['nome_do_campo'];}?>">

Observação: Sempre que utilizar a variável global $_SESSION, deve iniciar as sessões com a função session_start().

A função session_start() dispara cabeçalhos ao cliente, por isso, nunca deve ser invocada após um cabeçalho ser enviado. Quando isso ocorre, dispara erros do tipo "header already sent..".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .