Trimiterea formularelor într-o solicitare ajax

Cu ajutorul obiectului FormData, se pot trimite datele unui formular de pe pagina web către server folosind Ajax. Să examinăm un exemplu simplu. Ca server, la fel ca în articolele anterioare, vom folosi Node.js.

Mai întâi, creăm fișierul app.js, care va reprezenta serverul. Definim în el logica de bază:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
     
   if(request.url == "/user"){
         
         let body = "";   // buffer pentru datele primite
        // primim datele din solicitare în buffer
         for await (const chunk of request) {
           body += chunk;
         }
       // pentru parametrul name
       let userName = "";
       // pentru parametrul age
       let userAge = 0;

       // expresia regulată pentru căutarea numelor și valorilor câmpurilor formularului
       const exp = /Content-Disposition: form-data; name="([^\"]+)\"\r\n\r\n(\w*)/g;
       let formElement;
       while ((formElement = exp.exec(body))){
           paramName = formElement[1];   // obținem numele elementului formularului
           paramValue = formElement[2];  // obținem valoarea elementului formularului
           console.log(paramName, ":", paramValue);  // afișăm în consolă
           if(paramName === "name") userName = paramValue;
           if(paramName === "age") userAge = paramValue;
       }
       response.end(`Numele tău: ${userName}  Vârsta ta: ${userAge}`);
   }
   else{
       fs.readFile("index.html", (_, data) => response.end(data));
   }
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));

Să trecem rapid prin cod. Mai întâi, se conectează pachetele necesare:

const http = require("http");   // pentru gestionarea solicitărilor de intrare
const fs = require("fs");       // pentru citirea fișierelor de pe disc

Se folosește funcția http.createServer() pentru crearea serverului. Acestei funcții i se transmite un handler, care este apelat de fiecare dată când serverul primește o solicitare. Handlerul are doi parametri: request (conține datele solicitării) și response (gestionează trimiterea răspunsului).

Handlerul folosește proprietatea request.url pentru a obține calea resursei solicitate. Aici presupunem că clientul va trimite formularul la adresa "/user". Inițial, se procesează solicitarea către această adresă:

if(request.url == "/user"){

Pentru a extrage valorile trimise prin formular, citim corpul solicitării în variabila body:

let body = "";   // buffer pentru datele primite
// primim datele din solicitare în buffer
for await (const chunk of request) {
   body += chunk;
}

Pentru a avea o idee despre ce va conține corpul după citirea corpului solicitării, să presupunem că pe formular există două câmpuri numite "name" și "age". În acest caz, corpul solicitării va arăta aproximativ astfel:

------WebKitFormBoundarya9nLzvDVEN5gPA5Q
Content-Disposition: form-data; name="name"

Tom
------WebKitFormBoundarya9nLzvDVEN5gPA5Q
Content-Disposition: form-data; name="age"

39
------WebKitFormBoundarya9nLzvDVEN5gPA5Q--

Aici vedem marcajul de frontieră ------WebKitFormBoundarya9nLzvDVEN5gPA5Q, care definește începutul și sfârșitul corpului solicitării, precum și separă valorile diferitelor câmpuri ale formularului. (Valoarea marcajului de frontieră poate varia). Pentru fiecare câmp al formularului este definită expresia Content-Disposition: form-data;.

Apoi, folosind atributul name este indicat numele câmpului formularului. Apoi, printr-o linie nouă este indicată valoarea corespunzătoare a câmpului. Deci, în exemplul de mai sus, avem două câmpuri ale formularului: câmpul "name" cu valoarea "Tom" și câmpul "age" cu valoarea 39.

Acum sarcina noastră este să extragem numele și valorile câmpurilor formularului. Pentru aceasta folosim expresia regulată:

const exp = /Content-Disposition: form-data; name="([^\"]+)\"\r\n\r\n(\w*)/g;

Apoi, trecem prin corpul solicitării cu expresia regulată și extragem toate elementele formularului și valorile lor:

while ((formElement = exp.exec(body))){
   paramName = formElement[1];   // obținem numele elementului formularului
   paramValue = formElement[2];  // obținem valoarea elementului formularului
   
   if(paramName === "name") userName = paramValue;
   if(paramName === "age") userAge = paramValue;
}

Este important de menționat că acesta este un proces de parsare simplificat, care nu ia în considerare multe aspecte (trimiterea de array-uri, fișiere etc.) și este prezentat doar pentru a demonstra solicitările ajax.

După ce primim datele solicitării, trimitem înapoi clientului un anumit mesaj:

response.end(`Numele tău: ${userName}  Vârsta ta: ${userAge}`);

La final, cu ajutorul funcției listen() lansăm serverul web pe portul 3000. Astfel, serverul va fi accesibil la adresa http://localhost:3000/

Definirea clientului

Acum să definim fișierul index.html, care se află în aceeași directorie cu fișierul serverului app.js și care va reprezenta codul clientului:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<script>
// datele pentru trimitere
const formData = new FormData();  
formData.append("name", "Tom");  
formData.append("age", 39);

const xhr = new XMLHttpRequest();  
xhr.onload = () => {
   if (xhr.status == 200) {
       console.log(xhr.responseText);
   } else {
       console.log("Răspunsul serverului: ", xhr.statusText);
   }
};

xhr.open("POST", "user", true);  
xhr.send(formData);
</script>
</body>
</html>

Aici, datele formularului sunt definite manual ca obiect FormData. După ce se creează obiectul FormData, folosind metoda append() adăugăm proprietăți și valorile lor. Apoi, pentru a trimite la server, obiectul FormData este furnizat ca argument metodei send(). Se utilizează metoda HTTP POST.

În handlerul onload, afișăm mesajul primit de la server în consolă.

La final, mergem în consola la directorul serverului folosind comanda cd și pornim serverul cu comanda node server.js

După pornirea serverului, putem accesa în browser adresa http://localhost:3000, unde ne va fi afișată pagina, iar în codul JavaScript al acesteia se va executa o solicitare POST către adresa "/user". Codul JavaScript va primi răspunsul de la server și îl va afișa în consolă:

În exemplul de mai sus, datele formularului sunt definite manual. Totuși, într-un mod similar, se pot trimite și datele formularelor care sunt definite în codul HTML. De exemplu, modificăm codul paginii index.html în următorul mod:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<form id="myForm" method="post" action="/user">
<p>
   <label>Numele utilizatorului:</label><br>
   <input name="name" />
</p>
<p>
   <label>Vârsta utilizatorului:</label><br>
   <input name="age" />
</p>
<input type="submit" value="Trimite" />
</form>
<script>
// datele pentru trimitere
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", (e)=>{
   e.preventDefault();
   const formData = new FormData(myForm);

   const xhr = new XMLHttpRequest();  
   xhr.onload = () => {
       if (xhr.status == 200) {
           console.log(xhr.responseText);
       }
   };
   xhr.open("POST", "user", true);  
   xhr.send(formData);
});
</script>
</body>
</html>

Aici, în codul formularului este definită o formă cu două câmpuri de intrare pentru trimitere la server. Și aceste câmpuri au, de asemenea, numele "name" și "age". În codul JavaScript, interceptăm trimiterea formularului, obținem obiectul FormData din formular și îl trimitem la server.