Ai avut vreodată nevoie să actualizezi automat un câmp de formular în funcție de valoarea altuia? De exemplu, selectând o țară și având dropdown-ul statelor/provinciilor populate automat? În acest tutorial, vom parcurge cum să implementăm această funcționalitate comună folosind AJAX.

Să presupunem că avem un formular de selecție a produsului unde alegerea unui produs ar trebui să actualizeze automat câmpul prețului. Tradițional, acest lucru ar necesita o reîncărcare completă a paginii, dar cu AJAX, putem face acest proces lin și fără întreruperi.

Mai întâi, să creăm structura de bază a formularului:

<form id="productForm">
   <div class="form-group">
       <label for="productSelect">Selectează Produsul:</label>
       <select id="productSelect" name="product">
           <option value="">Alege un produs...</option>
           <option value="1">Widget Premium</option>
           <option value="2">Widget Basic</option>
           <option value="3">Super Widget</option>
       </select>
   </div>
   
   <div class="form-group">
       <label for="priceField">Preț:</label>
       <input type="text" id="priceField" name="price" readonly>
   </div>
</form>

Iată cum vom gestiona actualizarea AJAX:

document.addEventListener('DOMContentLoaded', function() {
   const productSelect = document.getElementById('productSelect');
   const priceField = document.getElementById('priceField');
   
   productSelect.addEventListener('change', function() {
       const selectedProduct = this.value;
       
       if (!selectedProduct) {
           priceField.value = '';
           return;
       }
       
       // Efectuăm cererea AJAX
       fetch('/api/get-price', {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
           },
           body: JSON.stringify({
               productId: selectedProduct
           })
       })
       .then(response => response.json())
       .then(data => {
           priceField.value = data.price;
       })
       .catch(error => {
           console.error('Eroare la preluarea prețului:', error);
           priceField.value = 'Eroare la încărcarea prețului';
       });
   });
});

Iată un exemplu de cum ar putea arăta gestionarul de pe partea server în PHP:

<?php
header('Content-Type: application/json');
// Obținem datele POST
$data = json_decode(file_get_contents('php://input'), true);
$productId = $data['productId'];
// Într-o aplicație reală, ați prelua acest lucru dintr-o bază de date
$prices = [
   1 => 99.99,
   2 => 49.99,
   3 => 149.99
];
$response = [
   'price' => isset($prices[$productId]) ? $prices[$productId] : null
];
echo json_encode($response);
?>

Am implementat gestionarea corectă a erorilor atât pe partea client, cât și pe partea server. Câmpul prețului arată stările de încărcare și mesajele de eroare atunci când este cazul. Formularul funcționează încă fără JavaScript, deși ar necesita o reîncărcare a paginii. Serverul validează ID-ul produsului înainte de a returna un preț.

Când implementați această caracteristică, aveți în vedere următoarele aspecte de securitate:

• Validați întotdeauna datele de intrare ale utilizatorului atât pe partea client, cât și pe partea server
• Folosiți token-uri CSRF pentru cererile POST
• Curățați datele înainte de a le afișa înapoi utilizatorului
• Implementați controale de acces adecvate pe punctul final al API-ului

Pentru a face actualizările AJAX chiar mai eficiente:

• Debounțați cererile AJAX dacă câmpul se poate schimba rapid
• Memorați răspunsurile pentru valorile frecvent solicitate
• Considerați utilizarea unui indicator de încărcare pentru conexiunile mai lente

Codul de mai sus utilizează API-ul Fetch, care funcționează în toate browserele moderne. Pentru browserele mai vechi, s-ar putea să doriți să utilizați un polyfill sau să treceți la XMLHttpRequest:

function makeRequest(url, data, callback) {
   const xhr = new XMLHttpRequest();
   xhr.open('POST', url, true);
   xhr.setRequestHeader('Content-Type', 'application/json');
   
   xhr.onreadystatechange = function() {
       if (xhr.readyState === 4) {
           if (xhr.status === 200) {
               callback(null, JSON.parse(xhr.responseText));
           } else {
               callback(new Error('Cerere eșuată'));
           }
       }
   };
   
   xhr.send(JSON.stringify(data));
}

Actualizarea dinamică a câmpurilor de formular cu AJAX creează o experiență de utilizator mai fluidă și reduce încărcarea serverului prin eliminarea reîncărcărilor de pagină inutile. Urmărind modelele și cele mai bune practici prezentate mai sus, puteți implementa această funcționalitate într-un mod robust și ușor de întreținut.

Amintiți-vă să testați în mod temeinic pe diferite browsere și condiții de rețea și întotdeauna prioritizați experiența utilizatorului oferind feedback adecvat în timpul încărcării și în stările de eroare.