When to use and not use AJAX when submitting forms?

Question

If I have a giant form of questions, sending via AJAX is the best way?

<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);
    }
});

In the URL algumaurl.php would have a update in a given id and within this page would have a echo reply (Erro na conexão or 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";
       }
    }

If I do using action="algumaurl.php" I will have problems if the form is already filled (I will lose all data later filled) in case of error, is not?

$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");
}

Answer 1

There are no clear cases where you should or should not use it. It depends on the experience you want to give the user.

First of all, one of the most common but very common mistakes that I see in applications that use AJAX or other similar technologies is that there is no fallback. That is, if for some reason the technology is not available, the page does not work. The first thing you should worry is whether sending with simple HTML is working perfect in all situations. Then think about giving a slightly better experience if it is available. But don’t let the page stop working because the browser doesn’t support the technology.

Although it’s like, I think this technique is worth even when the fallback is not required by the customer, where it can be guaranteed that the resource is available. I think the cost is very low and avoids a lot of future headache. It’s a matter of methodology and organization. The cost of disorganization is usually higher. Of course the experience of each one will make choose the best way.

I’m not against people who don’t want to fallback when it is not really needed according to requirements. I just find a worse and more disadvantageous way. And the customer is not always right. Most of the time I decide for him. He decides when he knows, is reasonable or I need the money :P You will do whatever is best for you.

Functioning of the AJAX

The only great advantage that AJAX brings is that you don’t have to upload another page, or the same one again, to send the data and have a response. This is done transparently for the user. It gives a better impression, is usually faster (I’ve seen people manage to slow down) and can reduce the volume of data traffic. But nothing very important. The experience really counts.

Eventually the script PHP that will receive the request needs to be adapted to meet the need of AJAX, but does not change in a way that prevents normal access. If so, create two scripts, one to answer the form by normal sending generating a full page and the other sending only the confirmation data that the operation was successful and inform something else that is relevant. If you know how to do the job it’s almost the same.

Advantage in your case

Sending each answered question really can be very interesting.

Whether or not data is lost will depend on your script PHP know how to manipulate this. It will have to persist somewhere (database, memory, etc.), have session control, etc. You will have to control the status of the form not being fully filled in, have garbage collection policies if a form is dropped in the middle. Anyway, there are several things to think about if you want to give a good user experience.

Have you ever wondered if there is a problem at the time of sending and you don’t have AJAX? The loss is huge. With AJAX done the way you’re thinking, either take advantage of the part that’s already been done, or stop the user from wasting their time on something that will serve no purpose.

It’s all complicated, having a fallback It’s simple. That’s why many sites prefer not to have AJAX. The cost of putting this feature the right way increases, but then who pays the cost is the user who will have a much worse experience.

If you’re doing something real, even if you’re testing yet, and you’re having specific questions, you look up whether you already have it here or ask.

Answer 2

The question has a certain ambiguity because the title gives a notion of a broader and generic theme referring to the use of ajax.

However, the context brings a specific problem that is to keep the data that the user sent safe even if an error occurs and there are redirects.

Considering the context, it is possible to keep the data entered by the user in session variables or cookies.

For example, action="algumaurl.php".

On the "algumaurl.php" page, which will receive the data (GET/POST), save all information received without session variables.

Example:

<?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.
*/

On the form page (page-2.php), add conditionals that check for a present session.

Example

<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'];}?>">

Note: Whenever you use the $_SESSION global variable, you should start sessions with the function session_start().

The function session_start() triggers headers to the client, so it should never be invoked after a header is sent. When this occurs, it triggers "header already sent errors..".