Ajax trimite un formular fără a reîncărca pagina. Formular de contact fără a reîncărca pagina. Cum se face un formular de feedback într-o fereastră modală
Recent, m-am confruntat cu ceea ce, în opinia mea, este o sarcină destul de comună: trebuie să ofer utilizatorului posibilitatea de a încărca pe server orice număr, să zicem, de imagini cu un comentariu pentru fiecare dintre ele într-o singură interfață. In cazul meu a fost: poza produsului, descrierea si cantitatea acestuia. Pentru claritate, atașez o captură de ecran a interfeței: Algoritm de idee și soluție Deoarece descrierile și fotografiile pot fi modificate de mai multe ori pentru a obține rezultatul final, s-a decis să implementăm următoarea schemă de lucru: fotografiile sunt încărcate pe server pe una singură. făcând clic pe pictograma fotografie, iar dacă are succes serverul returnează numele imaginii, iar dacă nu reușește, „eroare”. În consecință, dacă reușește, pictograma fotografie este înlocuită cu o miniatură a fotografiei încărcate, iar numele acesteia este stocat în câmpul de formular ascuns al liniei corespunzătoare, iar dacă nu reușește, primim o pictogramă de fotografie și un câmp de formular ascuns gol din linia corespunzătoare, responsabilă pentru numele fotografiei. La modificarea oricărui câmp al formularului, informațiile textuale sunt trimise către server, toate în formatul matricei [numeFotografie, descriereDetalii, cantitateBucăți] - aceasta este cea mai universală: aceeași metodă este responsabilă pentru actualizarea completă a listei de produse atunci când sunt editate sau șters. După cum știți, AJAX nu poate trimite fișiere, așa că vom implementa procedura de încărcare folosind un formular obișnuit, pentru care vom specifica un cadru ascuns ca țintă, care va fi reîncărcat în locul paginii.
1. Creăm un formular pe pagină pentru încărcarea fotografiilor. Conține o singură intrare, pe care o vom ascunde folosind css: