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 trimite datele la un fisier PHP si returneaza raspunsul
function ajaxrequest(formular, tagID) {
var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
// 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;
ob_ajax.open("POST", 'test_form.php', true); // Creaza cererea
// Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
ob_ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ob_ajax.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"
ob_ajax.onreadystatechange = function() {
if (ob_ajax.readyState == 4) {
document.getElementById(tagID).innerHTML = ob_ajax.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>
- Aici este un document HTML ce are in sectiunea HEAD un script pentru Ajax, iar in sectiunea BODY un formular in care vizitatori pot adauga un nume si un mesaj, aceste date vor fi trimise la script-ul Ajax care apoi le trimite la script-ul PHP din fisierul "test_form.php".<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
#id {
font-weight: 800;
}function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);$vname = 8; echo $vname;
We have traveled in space. - Noi am calatorit (deja) in spatiu.
La niña pintaba un arco iris. - Fetita picta un curcubeu.