Descriere: Utilizare Ajax cu date preluate din formulare
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
În general, datele adăugate în casetele dintr-un formular sunt trimise prin POST la un script de pe server specificat în atributul "action" al etichetei <form>.
Cu Ajax puteţi trimite datele preluate din formulare atât prin metoda GET cât şi prin metoda POST. Totuşi, ţinând cont că prin GET conţinutul care poate fi trimis este limitat iar în formulare pot fi adăugate o cantitate mare de date, în special dacă aveţi o casetă <textarea>, e de preferat folosirea metodei POST.
Procedeul de trimitere a datelor din formulare folosind Ajax este similar cu exemplele prezentate în lecţiile anterioare, diferenţa e dată de modul de preluare a acestor date. Pentru formulare, datele din casetele acestuia pot fi preluate folosind una din următoarele formule:
document.nume_form.nume_caseta.value
- unde "nume_form" e valoarea adăugată în atributul "name" din eticheta <form>, iar "nume_caseta" e valoarea adăugată în atributul "name" din caseta a cărei valoare vrem să o preluăm.
Sau
document.getElementById(id_caseta).value
- unde "id_caseta" e valoarea adăugată în atributul "id" din caseta a cărei valoare vrem să o preluăm.
Despre lucru cu JavaScript şi date din formulare puteţi citi şi în lecţia -> Ierarhia JavaScript (la punctul 2).
Iată şi un exemplu practic, din care să înţelegeţi mai bine.
1. - Creaţi pe server un fişier PHP, de exemplu "test_form.php", în care adăugaţi următorul cod:
Cod: Selectaţi tot
<?php
// Daca sunt primite date din formular
if (isset($_POST['nume']) && isset($_POST['mesaj'])) {
$nume = $_POST['nume'];
$mesaj = $_POST['mesaj'];
// Daca au fost completate casetele din formular
if (strlen($nume)>0 && strlen($mesaj)>0) {
echo 'Bine ai venit <b>'. $nume. '</b><br />Mesajul pe
care ti-l transmiti este "<i>'. $mesaj. '</i>"';
}
else {
echo 'Completati toate campurile din formular';
}
}
?> 2. - Creaţi un fişier HTML pe server, de exemplu "ajax_form.html", în acelaşi director unde este şi fişierul "test_form.php", şi adăugaţi în el codul de mai jos (studiaţi şi comentariile din cod).
Cod: Selectaţi tot
<!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> - Codul onsubmit="ajaxrequest(this, 'raspuns'); return false;", din eticheta <form>, face ca la click pe butonul "Trimite" să fie apelată direct funcţia "ajaxrequest()" (şi nu adresa din atributul "action"), transferându-i ca argument "this" (care aici reprezintă formularul curent) şi id-ul div-ului în care va fi adăugat răspunsul.
Sintaxa "return false" are rolul de a opri deschiderea din formular a adresei din "action", fără această sintaxă, după trimiterea datelor la scriptul Ajax, ar fi fost apelată în fereastra navigatorului şi adresa din atributul "action"; totuşi, aceasta e bine să fie adăugată deoarece astfel datele vor fi trimise la fişierul PHP şi dacă utilizatorul are JavaScript dezactivat.
- După ce în variabila "cerere_http" este adăugată instanţa la obiectul XMLHttpRequest (prin apelarea funcţiei "get_XmlHttp()", care defineşte acest obiect în funcţie de browser), sunt preluate datele din formular în variabilele "numele"şi "mesajul".
- Apoi am creat variabila "datele" pentru a construi şi adăuga aceste date sub forma care este recunoscută de script-ul PHP (perechi indice=valoare); această variabilă va fi folosită ca parametru al metodei "send()".
- În continuare este creată cererea cu "open()", conţinând tipul metodei de transfer POST şi adresa, numele fişierului PHP.
- Pentru ca datele să fie recunoscute că au fost trimise prin POST, am adăugat cu metoda "setRequestHeader()" un Header specific, iar datele care trebuie recunoscute de scriptul PHP sunt adăugate ca parametru în "send(datele)".
- Scriptul PHP va procesa datele şi după ce se verifică faptul că răspunsul a fost primit complet, îl afişează în div-ul cu id-ul precizat pentru "tagID".
- Completaţi câmpurile din formular şi daţi click pe butonul "Trimite".
Dacă doriţi ca datele preluate din formular să fie trimise de scriptul Ajax prin GET, aplicaţi exemplul prezentat în Utilizare Ajax cu GET si PHP . În acest caz trebuie modificat şi scriptul PHP, ca să preia datele primite prin GET.
Puteţi construi şi exemple mai complicate, cum ar fi funcţii JavaScript care să auto-apeleze la intervale de timp (cu "setInterval()") o funcţie Ajax, sau scriptul PHP să folosească datele primite pentru a le adăuga într-o bază de date ori în alte fişiere. Totul depinde de imaginaţia şi cunoştinţele dumneavoastră.