In general, datele adaugate in casetele dintr-un formular sunt trimise prin POST la un script de pe server specificat in atributul "action" al etichetei <form>.
Cu Ajax puteti trimite datele preluate din formulare atat prin metoda GET cat si prin metoda POST. Totusi, tinand cont ca prin GET continutul care poate fi trimis este limitat iar in formulare pot fi adaugate o cantitate mare de date, in special daca aveti o caseta <textarea>, e de preferat folosirea metodei POST.
Procedeul de trimitere a datelor din formulare folosind Ajax este similar cu exemplele prezentate in lectiile anterioare, diferenta e data de modul de preluare a acestor date. Pentru formulare, datele din casetele acestuia pot fi preluate folosind una din urmatoarele formule:
document.nume_form.nume_caseta.value
- unde "nume_form" e valoarea adaugata in atributul "name" din eticheta <form>, iar "nume_caseta" e valoarea adaugata in atributul "name" din caseta a carei valoare vrem sa o preluam.
Sau
document.getElementById(id_caseta).value
- unde "id_caseta" e valoarea adaugata in atributul "id" din caseta a carei valoare vrem sa o preluam.
Despre lucru cu JavaScript si date din formulare puteti citi si in lectia -> Ierarhia JavaScript (la punctul 2).
Iata si un exemplu practic, din care sa intelegeti mai bine.
1. - Creati pe server un fisier PHP, de exemplu "test_form.php", in care adaugati urmatorul cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ro"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>Exemplu Ajax cu Form</title> <script type="text/javascript"> <!-- // Functia care verifica si creaza obiectul XMLHttpRequest in functie de browser function get_XmlHttp() { // Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula var xmlHttp = null; if(window.XMLHttpRequest) { // Daca browser-ul e Forefox, Opera, Safari, ... xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) { // Daca browser-ul este Internet Explorer xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp; } // Functia care trimite datele la un fisier PHP si returneaza raspunsul function ajaxrequest(formular, tagID) { var cerere_http = get_XmlHttp(); // Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest // Preia datele necesare din formular var numele = formular.nume.value; var mesajul = formular.mesaj.value; // Construieste datele care trebuie trimise prin POST la scriptul PHP (perechi nume=valoare) var datele = 'nume='+numele+'&mesaj='+mesajul; cerere_http.open("POST", 'test_form.php', true); // Creaza cererea // Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); cerere_http.send(datele); // Efectueaza trimiterea cererii, impreuna cu valorile care trebuie transmise // Verifica starea cererii // Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID" cerere_http.onreadystatechange = function() { if (cerere_http.readyState == 4) { document.getElementById(tagID).innerHTML = cerere_http.responseText; } } } //--> </script> </head> <body> <form action="test_form.php" method="post" name="form1" onsubmit="ajaxrequest(this, 'raspuns'); return false;"> Numele tau: <input type="text" name="nume" id="nume" size="20" maxlength="33" /><br /> Transmite un mesaj:<br /> <textarea name="mesaj" id="mesaj" cols="25" rows="4"></textarea><br /> <input type="submit" value="Trimite" /> </form> <div id="raspuns"> </div> </body> </html>