Trimiterea datelor din formularul post php. Manipulator de formulare. Trimiterea datelor prin e-mail

Exemplul 1: Trimiterea datelor din formular

HTML5 IE Cr Op Sa Fx

Ce metodă este utilizată poate fi determinată cu ușurință de bara de adrese a browserului. Dacă în el apare un semn de întrebare și adresa arată astfel, atunci acesta este cu siguranță un GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

O combinație unică de parametri din bara de adrese identifică în mod unic o pagină, astfel încât paginile cu adrese ?q=node/add și ?q=node sunt considerate diferite. Această caracteristică este utilizată de sistemele de management al conținutului (CMS, Sistem de management al conținutului) pentru a crea multe pagini de site. În realitate, se folosește un singur fișier care primește o cerere GET și, conform acesteia, generează conținutul documentului.

Mai jos sunt enumerate aplicațiile tipice ale acestor metode pe site-uri.

OBȚINE

Transferarea datelor text mici către server; Cautare site.

Motoarele de căutare și formularele de căutare pe site sunt trimise întotdeauna folosind metoda GET, aceasta vă permite să partajați rezultatele căutării cu prietenii, să trimiteți un link prin poștă sau să-l postați pe un forum.

POST

Transferul de fișiere (fotografii, arhive, programe etc.); trimiterea de comentarii; adăugarea și editarea mesajelor pe forum, blog.

În mod implicit, formularul este procesat în fila curentă a browserului; totuși, atunci când trimiteți formularul, puteți modifica acest parametru și puteți deschide gestionarea formularului într-o filă sau cadru nou. Acest comportament este specificat prin „numele contextului”, care este valoarea atributului țintă al etichetei . Valorile populare sunt _blank pentru a deschide formularul într-o fereastră sau filă nouă și numele cadrului, care este specificat de atributul nume al etichetei

Exemplul 3: Conectarea unui formular la câmpuri

HTML5 IE Cr Op Sa Fx

Deși parametrii de transfer de formulare sunt specificați în mod tradițional în etichetă , acestea pot fi transferate și la butoanele de trimitere a formularului ( Și ). Pentru aceasta, se utilizează un set de atribute formaction , formmethod , formenctype și formtarget, care sunt analogi ale atributelor corespunzătoare fără prefixul de formă. Exemplul 4 arată utilizarea acestor atribute.

Exemplul 4: Trimiterea unui formular

HTML5 IE Cr Op Sa Fx

Toate atributele de formular noi nu sunt acceptate de unele browsere, în special de Internet Explorer și Safari.

Lucrări de laborator 1. Protocolul HTTP. Metode GET, POST. Formulare HTML.

Partea teoretică

Ciclul de viață al cererii HTTP

1. Browser deschide conexiunea cu serverul
2. Browserul trimite o cerere către server pentru a primi pagina
3. Serverul generează un răspuns (cel mai adesea cod HTML) către browser și închide legătura
4. Browserul procesează codul HTML și afișează pagina

Acordați atenție celor evidențiate îndrăzneţ. Chiar înainte de a vedea pagina solicitată pe ecran, conexiunea la server este închisă și a uitat de tine. Și când introduceți o adresă diferită (sau aceeași), sau faceți clic pe un link sau faceți clic pe un buton de formular HTML, același model se va repeta din nou.

Acest tip de muncă se numește "client server". Clientul în acest caz este browserul.

Așadar, conexiunea la serverul web durează doar câteva secunde (sau fracțiuni de secunde) - aceasta este perioada de timp dintre clic pe un link (sau alt tip de solicitare) și pagina începe să fie afișată. Majoritatea browserelor afișează un fel de indicator în timpul conexiunii, de exemplu, MS Internet Explorer afișează o animație în colțul din dreapta sus.

Pentru a scăpa pentru totdeauna de percepția HTTP ca o „cutie neagră”, să ne „prefacem” că suntem un browser care folosește telnet:

1. Hai să lansăm telnet ya.ru 80
2. Să introducem următoarele în fereastra terminalului (dacă intrarea nu este afișată, este în regulă):

GET / HTTP/1.0[apăsați pe Enter aici]
Gazdă: ya.ru[aici apăsați Enter de două ori]

Apăsarea Enter corespunde de obicei combinației de caractere CR + LF, notate ca \r\n. Această notație va fi folosită mai jos.

Codul HTML al paginii http://ya.ru/ va rula pe ecran. După cum puteți vedea, nimic complicat.

Codul sursă al paginii curente poate fi vizualizat în aproape orice browser selectând „Vizualizare|Sursă” din meniu.

Poze, rame - toate acestea sunt cereri suplimentare, exact aceleasi. De fapt, de unde provin imaginile din fereastra browserului: atunci când analizează (procesează) codul HTML, browserul dă peste eticheta https://i2.wp.com/ imagine"> face o cerere suplimentară către server - cerere Poze, și îl afișează în locul unde se află eticheta .

Încerca:

Telnet www.google.ru 80

GET /php/php5ru.png HTTP/1.0\r\n
Gazdă: ya.ru\r\n\r\n

Ceea ce veți vedea dacă vizualizați acest fișier png într-un editor de text va clipi pe ecran.

I-2. Formulare HTML. Metode de trimitere a datelor către server

Probabil că ați întâlnit deja formulare HTML:

2. Introdu numele tau:
3. 
   

Salvând acest cod într-un fișier HTML și vizualizându-l folosind browserul preferat, veți vedea un formular HTML familiar:

Introdu numele tau:

Să aruncăm o privire mai atentă la etichetele folosite în acest scurt exemplu.

Etichetă

, având o etichetă de capăt asociată

, setează de fapt forma. Atributele sale sunt ambele opționale:

• acțiune- specifică URL-ul (complet sau relativ) la care trimis formă. Trimiterea unui formular este aceeași cerere către server ca toate celelalte (cum am descris deja mai sus).

Dacă acest atribut nu este specificat, majoritatea browserelor (mai precis, toate browserele cunoscute de mine) trimit formularul către documentul curent, adică „la sine”. Aceasta este o scurtătură convenabilă, dar, conform standardului HTML, este necesar atributul de acțiune.

• metodă - cale depunerea formularului. Sunt doi dintre ei.
• OBȚINE- trimiterea datelor formularului în bara de adrese.
  Este posibil să fi observat pe diferite site-uri web prezența unui „?” la sfârșitul adresei URL. și următoarele date în format parametru=valoare. Aici "parametru" corespunde sens atribut Nume elemente de formular (vezi mai jos despre etichetă ), și „valoare” - conținutul atributului valoare(conține, de exemplu, introducerea utilizatorului într-un câmp de text al aceleiași etichete ).
  De exemplu, încercați să căutați ceva în Yandex și acordați atenție barei de adrese a browserului. Aceasta este metoda GET.
• POST- datele formularului sunt trimise către organismul de cerere. Dacă nu este complet clar (sau complet neclar) ce este aceasta, nu vă faceți griji, vom reveni la această problemă în curând.

Dacă atributul metodă nespecificat - „GET” este implicit.

Etichetă - seturi element de formă, definit de atribut tip :

• Sens "text" specifică un câmp de introducere a textului cu o singură linie
• Sens "Trimite" specifică un buton care, atunci când este apăsat, provoacă trimitere formulare către server

Alte valori sunt posibile (și - nu este singura etichetă care definește un element de formular), dar le vom analiza în capitolele următoare.

Deci, ce se întâmplă când facem clic pe „OK”?

1. Browserul se uită la elementele incluse în formular și formează din acestea atributele de nume și valoare datele formularului. Să presupunem că numele este introdus Vasia. În acest caz, datele formularului sunt nume=Vasya&okbutton=OK
2. Browserul stabilește o conexiune cu serverul, trimite o cerere către server pentru documentul specificat în atribut acțiune etichetă
   , folosind metoda de trimitere a datelor specificată în atribut metodă(în acest caz - GET), transmiterea datelor din formular în cerere.
3. Serverul analizează cererea primită, generează un răspuns, îl trimite către browser și închide conexiunea
4. Browserul afișează documentul primit de la server

Trimiterea aceleiași solicitări manual (folosind telnet) arată astfel (presupunând că numele de domeniu al site-ului este www.example.com):

telnet www.example.com 80

GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
Gazdă: www.example.com\r\n
\r\n

După cum probabil ați ghicit deja, să faceți clic pe butonul de trimitere de pe un formular cu o metodă de trimitere „OBȚINE” este același lucru cu introducerea adresei URL corespunzătoare (cu un semn de întrebare și date de formular la sfârșit) în bara de adrese a browserului: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

De fapt, metoda GET este folosită ori de câte ori solicitați un document de la server prin simpla introducere a URL-ului acestuia sau făcând clic pe un link. Folosind , adresa URL este pur și simplu atașată cu un semn de întrebare și date de formular.

Acum să înlocuim prima linie a formularului nostru cu următoarele:

Am specificat metoda de trimitere ca „POST”. În acest caz, datele sunt trimise către server într-un mod ușor diferit:

telnet www.example.com 80

POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n
Gazdă: www.example.com\r\n
Tip de conținut: application/x-www-form-urlencoded\r\n
Lungimea conținutului: 22\r\n
\r\n
nume=Vasya&okbutton=OK

Când utilizați metoda POST, datele formularului sunt trimise după „două intrări” - către corp cerere. Tot ce este mai sus este adevărat titlu cerere (și când am folosit metoda GET, datele formularului au fost trimise în antet). Pentru ca serverul să știe la ce octet să nu mai citească corpul cererii, antetul conține linia Conținut-Lungime; că datele formularului vor fi transmise în formular parametru1=valoare1¶metru2=valoare2..., iar valorile sunt transmise sub formă de urlencode - adică exact la fel ca folosind metoda GET, dar în corpul cererii - serverul este informat de antetul „Content-Type: application/x- www-form-urlencoded".

Avantajul metodei POST este că nu există nicio limită pentru lungimea liniei de date din formular.

Când utilizați metoda POST, nu este posibil să trimiteți formularul pur și simplu „urmând un link”, așa cum a fost cazul GET.

Când utilizați un formular POST, în atributul său acțiune De asemenea, puteți specifica parametrii formularului GET după semnul întrebării. Astfel, metoda POST include metoda GET.

Pentru a organiza transferul de date către server folosind un formular, va trebui să implementați un formular HTML în care vizitatorii site-ului își vor introduce informațiile și codul PHP, al cărui scop este să accepte și să proceseze datele primite pe server.

Formular de trimitere a datelor HTML

Formularul de pe pagină este format din etichete ..., în care sunt plasate etichete pentru câmpuri pentru introducerea informațiilor text, etichete pentru componente speciale (de exemplu, o casetă combinată), etichete pentru un câmp de selecție și încărcare fișier.

* Pentru HTML5 este, de asemenea, posibil să plasați etichete de câmpuri de formular nu în interiorul etichetelor de formular, ci oriunde în pagină. În acest caz, pentru fiecare astfel de câmp trebuie să specificați atributul „form” pentru a determina cu ce formular de trimitere ar trebui să interacționeze.

Deci, cel mai simplu formular de depunere poate conține următorul cod:

Valoarea A:
Valoarea B:

Elemente de formular și parametrii acestora:

action="myform.php"– atributul „acțiune” determină ce fișier php va procesa datele trimise. În acest exemplu, datele vor fi trimise în fișierul „myform.php”, aflat în același director cu pagina cu formularul. Dacă acest atribut nu este specificat în mod explicit, datele formularului vor fi trimise la adresa paginii formularului însuși.

method="post"– parametrul metodă determină metoda de transfer de date POST sau GET. Mai multe detalii despre acest lucru în articolul „Diferențe între metodele POST și GET”. Dacă nu specificați atributul în mod explicit, metoda GET va fi utilizată implicit.

Text „Valoarea A:”Și „Valoarea B:” adăugat numai în scopul designului și clarității formularului pentru utilizator. Nu este necesar să adăugați acest lucru pentru a transfera date, dar pentru a fi clar utilizatorului ce să introducă, merită indicat.

Etichete sunt folosite pentru a forma diverse elemente de control al formei.

tip="text"– atributul „tip” determină tipul câmpului. În funcție de tipul specificat, atât aspectul elementului, cât și scopul acestuia se schimbă. Valoarea atributului „text” indică faptul că elementul va fi afișat în browser ca un câmp text cu o singură linie în care utilizatorul poate introduce un șir.

name="data1"– atributul „nume” indică numele, sau mai bine zis indexul datelor din matricea primită de server. Acesta este un parametru obligatoriu, prin care handlerul PHP poate accesa apoi valoarea transmisă. Numele poate fi ales arbitrar, cu toate acestea, este mai convenabil atunci când această valoare are o semnificație clară.

tip="trimite"- etichetă cu această valoare a parametrului „tip” va fi afișat pe pagină ca buton. De fapt, poți să faci fără un buton din formular. Dacă, de exemplu, formularul are câmpuri text, atunci trimiterea se poate face prin simpla apăsare a „Enter” de pe tastatură. Dar a avea un buton face forma mai ușor de înțeles.

value="Trimiteți" !}– în acest caz (pentru type="submit") definește doar eticheta de pe buton. Pentru type="text", de exemplu, acesta va fi textul care va fi afișat în câmpul de text.

Ca rezultat, pe pagină acest cod va arăta cam așa:

Valoarea A:
Valoarea B:

Făcând clic pe butonul, datele vor fi trimise către pagina specificată, iar dacă acestea există și funcționează corect, datele vor fi prelucrate.

Prelucrarea datelor trimise prin formular HTML în PHP

Datele trimise în modul descris sunt plasate în tablourile superglobale $_POST, $_GET și $_REQUEST. $_POST sau $_GET vor conține date în funcție de metoda folosită pentru a le trimite. $_REQUEST conține date trimise prin oricare dintre metodele specificate.

$_POST, $_GET și $_REQUEST sunt tablouri asociative ale căror câmpuri de index coincid cu atributele „nume” ale etichetelor . În consecință, pentru a lucra cu datele din fișierul myform.php, puteți atribui variabilelor valorile elementelor unei astfel de matrice, specificând numele câmpului ca index:

// pentru metoda GET
$a = $_GET[ „data1” ];
$b = $_GET[ „data2” ];

// pentru metoda POST
$a = $_POST[ „data1” ];
$b = $_POST[ „data2” ];

// pentru orice metodă
$a = $_CERERE[ „data1” ];
$b = $_CERERE[ „data2” ];

Verificarea completării câmpurilor formularului

Uneori, atunci când primiți date, trebuie să verificați dacă utilizatorul a trimis un formular gol. Puteți utiliza funcția goală pentru aceasta.

dacă (gol ($_REQUEST["data1" ])) (
ecou „Câmpul nu este completat”;
} altceva(
ecou „Câmpul a fost umplut”;
$a = $_CERERE[ „data1” ];
}

De obicei, această soluție este suficientă. Dacă trebuie să introduceți text, va fi clar dacă a fost introdus sau nu. Cu toate acestea, dacă utilizatorul introduce în mod intenționat zero în scopuri de calcul, funcția goală va arăta că nu există nicio valoare. Prin urmare, pentru astfel de situații este mai bine să folosiți funcția isset. Se va verifica în mod explicit dacă valoarea este dată sau nu.

if (isset ($_REQUEST["data1" ])) (
ecou „Câmpul a fost umplut”;
$a = $_CERERE[ „data1” ];
} altceva(
ecou „Câmpul nu este completat”;
}

Multe aplicații web folosesc formulare pentru a colecta date și a trimite datele către server. Formularele conțin de obicei mai multe elemente pentru introducerea diferitelor tipuri de date, cum ar fi numele, adresa, data nașterii, adresa de e-mail și așa mai departe. HTML acceptă mai multe tipuri de elemente de introducere, inclusiv câmpuri de text, butoane radio și casete de selectare. HTML5 a adăugat mai multe elemente speciale, cum ar fi e-mailul, câmpul pentru parolă, selecția culorilor, widget-uri pentru dată și oră și glisoare.

Exemplul principal al acestui tutorial conține o parte client și o parte server. Partea client folosește Polymer pentru a furniza interfața cu utilizatorul (formularele conțin multe tipuri de elemente de intrare) și interfața de sincronizare a datelor cu Dart. Clientul și serverul comunică folosind unele clase din diferite biblioteci, inclusiv fluxuri, fluxuri, HttpRequest și așa mai departe. Serverul folosește anteturi CORS pentru a activa cererile pe mai multe domenii.

cometariu Acest articol se bazează pe ceea ce ați citit în secțiunile: Crearea elementelor personalizate, Utilizarea API-ului Futures, Procesarea dinamică a datelor și ar trebui să vă familiarizați cu biblioteca Polymer, futures, JSON și HttpRequest.

Informații generale despre formulare

Formularele au o proprietate acțiune, care este adresa URL pentru a trimite datele formularului și metodă care determină modul în care trebuie trimise datele. Proprietățile acțiunii și metodei pot fi definite direct în HTML, sau pentru un caz mai complex sau pentru a obține mai mult control, puteți scrie cod Dart și utiliza bibliotecile Dart pentru a expune aceste proprietăți în mod programatic

Să începem cu elementele de bază, doar cu formularele HTML, pentru a înțelege proprietățile de acțiune și metodă ale elementelor de intrare și pentru a înțelege comportamentul standard al formularelor. Formularul de mai jos, inclus într-o etichetă

, este folosit pentru a căuta datele introduse de utilizator în Google. Informațiile sunt căutate pe site dacă caseta de selectare este bifată (și pe Internet dacă nu). Acest exemplu, numit search_form, caută în dartlang.org resurse utile „carte de bucate” în mod implicit.

Iată codul HTML pentru a crea formularul:

…

Utilizarea atributelor de acțiune și metodă.

Și aici este codul HTML care adaugă trei elemente de intrare în formular - un câmp de text, un buton de trimitere și o casetă de selectare.

Căutați dartlang.org

Caseta de selectare este înfășurată într-o etichetă de etichetă, așa că puteți da clic atât pe caseta de selectare, cât și pe titlu, pentru a modifica valoarea.

Acest cod HTML oferă un comportament automat.

****

Creează un buton special care, atunci când este făcut clic, determină trimiterea datelor din formular. Pe baza atributelor acțiunii și metodei, butonul generează o solicitare și o trimite către server la adresa URL specificată.

**name=q** **name="sitesearch"**

definește numele câmpului de text și numele casetei de selectare.

Pentru elementele dintr-un formular care au un nume specificat, acestea furnizează date pentru formularul respectiv. În acest exemplu, valoarea furnizată de câmpul text este valoarea pentru q, iar caseta de selectare oferă valoarea pentru cautare site, ambii acești parametri fac parte dintr-o adresă URL de interogare Google validă. Când utilizatorul face clic pe butonul, numele și valoarea corespunzătoare sunt adăugate la adresa URL de căutare. Iată un exemplu de cerere:

Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org

Acest exemplu a fost creat în întregime fără niciun cod Dart sau Javascript. Deoarece este foarte simplu, poate folosi comportamentul normal al HTML: URL-uri accesibile public și ușor de format, precum și o solicitare GET obișnuită. Pentru formularele care conțin o cantitate mare de date sau pentru o aplicație web care comunică cu un server specializat, de obicei trebuie să procesați formularul în mod programatic.

Următorul exemplu arată un formular mai complex care trimite în mod programatic date către server folosind o solicitare POST.

Exemplu de slambook în special

Această secțiune include două programe ca exemple de bază.

Primul este un program de server obișnuit numit slambookserver, care ascultă pe portul 4040 de pe computerul local și procesează cererile POST și OPȚIUNI prin generarea de mesaje și trimiterea confirmării către client. Serverul folosește anteturi CORS pentru a permite aplicației să utilizeze cererile trimise de la alte servere.

Al doilea este un program client numit slambook, care oferă un formular în care utilizatorul poate introduce informații. Acest program folosește Polymer pentru legarea dublă a datelor, între elementele de intrare și variabilele Dart. Când utilizatorul face clic pe buton, codul Dart convertește datele într-un șir JSON, trimite o solicitare OPȚIUNI pentru a obține permisiunea serverului și apoi trimite o solicitare POST pentru a trimite datele. Când se primește o solicitare de la server, aceasta este afișată clientului.

Următoarea diagramă arată secvența comunicării dintre server și client în acest exemplu.

Incearca-l! Introduceți orice date și faceți clic pe butonul Trimite.

Notă de versiune. Aplicația slambook este compatibilă cu polymer.dart 0.9.

Solicitarea returnează mesajul „Fără server” deoarece nu ați pornit serverul pe computer. Să reparăm asta.

Pornirea serverului

Codul sursă al programului de server principal slambookserver.dart poate fi descărcat din exemplele tutorialului

Rulați programul server din linia de comandă

% dart slambookserver.dart Ascultare pentru GET și POST pe http://127.0.0.1:4040

Acum puteți încerca din nou să trimiteți datele din aplicația slambook de mai sus.

cometariu: Dacă un alt program folosește deja portul 4040, serverul va returna un mesaj de eroare și va termina execuția. Programul de pe această pagină se așteaptă ca slambookserver să fie localizat pe mașina locală, portul 4040. Prin urmare, pentru ca aplicația să funcționeze, trebuie să opriți un alt proces și să porniți din nou slambookserver. Sau puteți schimba numărul portului în programul server și client. Evitați să utilizați 3030, deoarece Dart Editor îl folosește. Apoi rulați clientul și serverul pe mașina dvs. locală.

Restul acestui tutorial explică codul serverului și clientului.

Despre partea client veți afla despre:

Trimiterea datelor din formular

Resetare formular

Utilizarea polimerului pentru a lega datele de formă

Partea de server din această secțiune va vorbi despre:

Antetele CORS

Procesarea cererilor OPTIONS

Gestionarea cererilor POST

Trimiterea datelor din formular

În primul rând, să aruncăm o privire la modul în care datele sunt trimise către server.

Amintiți-vă că exemplul search_form s-a bazat pe utilizarea atributelor acțiune și metodă pentru a specifica scopul și metoda de trimitere a formularului. De asemenea, rețineți că exemplul search_form se bazează pe comportamentul automat al unui buton special de trimitere. Pe de altă parte, exemplul de slambook este implicat direct în procesul de depunere:

În primul rând, nici acțiunea, nici metoda nu sunt definite în formă

În al doilea rând, butonul de trimitere are un handler de clic în Dart

În al treilea rând, gestionarea clicurilor înlocuiește comportamentul automat al butonului de trimitere

În cele din urmă, datele formularului sunt trimise către server folosind bibliotecile Dart

Forma din exemplul slambook este reprezentată de un element personalizat tute-slambook-form, care este reprezentat de următorul cod HTML:

Observați absența atributelor de acțiune și metodă. În schimb, comportamentul butonului de trimitere este definit în gestionarea de clic pe buton al lui Dart. Mai jos este codul HTML care creează butonul de trimitere și îl leagă de gestionarea Dart.

…

Și codul în sine pentru manipulatorul de clic pe butonul submitForm():

Să ne uităm la fiecare element al codului de gestionare

Anulați un handler standard

Acesta este un eveniment fără atribute acțiuneȘi metodă, butonul de trimitere conține un comportament automat care nu este necesar în exemplul slambook. Prin urmare, prima linie a codului de gestionare apelează e.preventDefault() pentru a suprascrie comportamentul implicit al butonului.

Void submitForm(Evenimentul e) ( e.preventDefault(); // Nu faceți trimiterea implicită.… )

Configurarea și trimiterea unei cereri POST

Următoarea bucată de cod creează un obiect HttpRequest. Acest cod folosește new pentru a instanția un obiect HttpRequest, care este folosit pentru a configura și trimite o solicitare POST. Clasa HttpRequest are o funcție getString() corespunzătoare, astfel încât să puteți utiliza și trimite solicitări GET obișnuite către adrese URL.

Următoarea linie oferă obiectului HttpRequest o funcție de apel invers numită onData, care este apelat atunci când se primește un răspuns de la server. Ne vom uita la detaliile declarației funcției onData() mai târziu.

Important: Trebuie să înregistrați o funcție de apel invers înainte de a trimite cererea!

Solicitare = HttpRequest nou (); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());

În cele din urmă, funcția trimite datele formularului către server ca șir JSON. Uneori datele sunt trimise în părți. Dar acest exemplu este suficient de mic încât datele să fie trimise la un moment dat. Această solicitare este asincronă, deci metoda send() se va finaliza imediat ce cererea este trimisă.

Se așteaptă un răspuns de la server

Obiectul HttpRequest comunică cu serverul. Puteți obține statul folosind câmpul readyState Obiect HttpRequest. Starea gata poate lua cinci valori diferite: netrimis, deschis, antete primite, încărcare și terminat. Când starea de pregătire se schimbă, HttpRequest generează un eveniment și este apelată funcția de apel invers onData().

Să ne amintim linia de cod în care este înregistrat handlerul de evenimente onReadyStateChange:

Request.onReadyStateChange.listen(onData);

Singurul argument necesar pentru metoda listen() este o funcție de apel invers cu semnătură: void onData(T). Metoda listen() vă permite, de asemenea, să definiți trei argumente suplimentare, cum ar fi un handler de erori.

Mai jos este funcția de apel invers onData():

Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Datele au fost salvate OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Starea este 0... cel mai probabil serverul nu rulează. serverResponse = „Fără server”; ) )

Primul lucru pe care îl arată codul este dacă solicitarea a fost finalizată cu succes. Dacă da, atunci conținutul răspunsului este plasat în rândul numit serverResponse, care este legat de valoarea elementului textarea aplicației slambook. Când un șir este schimbat, interfața de utilizator se va actualiza automat și un mesaj va fi afișat utilizatorului.

Dacă cererea este executată cu o eroare, programul va ieși serverResponse mesaj de eroare care va fi afișat utilizatorului.

Resetarea datelor din formular

Un buton de resetare este un element de introducere HTML special care, implicit, șterge valorile introduse în formularul respectiv. În schimb, dorim ca butonul să resetați valorile formularului la valorile lor originale. Prin urmare, gestionarea clicurilor pentru butonul de resetare trebuie să înlocuiască comportamentul automat și să completeze în mod explicit datele.

Void resetForm(Eveniment e) ( e.preventDefault(); favoriteThings["pisoi"] = fals; favoriteThings["raindrops"] = fals; favoriteThings["mitans"] = fals; favoriteThings["kittens"] = fals; theData ["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"; theData["birthday"] = "2013-01-01"; theData["volumul "] = "0"; theData["catOrDog"] = "pisica"; theData["music"] = 0; theData["zombies"] = false; serverResponse = "Resetarea datelor."; )

Crearea unui backend și ascultarea pe un port

Acum să aruncăm o privire la partea de server, care se numește slambookserver, returnează un răspuns HTTP la o solicitare trimisă de la aplicația client slambook. Codul serverului se bazează pe articolul [Utilizarea Dart pentru a crea servicii web JSON (#)

Serverul ascultă portul 4040 de pe mașina locală și procesează numai cereri precum POST și OPȚIUNI. Ambele tipuri de solicitări folosesc antete CORS pentru a permite accesul. Pentru solicitările POST, serverul returnează un scurt mesaj de confirmare care include datele JSON pe care le-a primit din cerere.

Să aruncăm o privire la cod.

Funcția main() a aplicației slambookserver este prezentată în întregime mai jos. Folosind clasa HttpServer, aplicația slambookserver începe să asculte pe portul 4040 al mașinii locale după apelarea funcției de nivel superior lega()

GAZDA finală = "127.0.0.1"; PORT final = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, oneError: printError); )

Funcția bind() returnează un viitor care poate fi folosit pentru a obține o valoare în viitor (mai multe informații vor veni în doar un minut). Funcția then() înregistrează două funcții de apel invers ca viitor. Prima funcție, gotMessage(), este apelată atunci când viitorul primește valori. Al doilea printErrore Apelat atunci când o încercare de conectare eșuează. Poate apărea o eroare, de exemplu, dacă un alt program ascultă deja pe același port.

Filtrați cererile și apelați metodele rămase pentru a gestiona fiecare tip de cerere de funcție gotMessage() mai jos.

Void gotMessage(_server) ( _server.listen((HttpRequest cerere) ( switch (request.method) (case „POST”: handlePost(request); break; case „OPTIONS”: handleOptions(cerere); break; implicit: defaultHandler( cerere); ) ), onError: printError); // Ascultarea a eșuat. print(„Se ascultă GET și POST pe http://$HOST:$PORT”); )

Pentru a gestiona alte tipuri de solicitări, cum ar fi GET, pur și simplu puteți adăuga mai multe valori la caz De exemplu caz „GET”.

Un pic despre viitor.

Să ne uităm puțin la viitor înainte de a ne uita la codul pentru procesarea solicitărilor POST și OPTIONS.

Un viitor reprezintă o modalitate de a obține o valoare cândva în viitor. Utilizați futures pentru a preveni blocarea unui program în timp ce așteaptă date, de exemplu dacă este necesar un calcul lung pentru a furniza o valoare sau dacă valoarea trebuie citită sau preluată folosind I/O.

Când o funcție care returnează un viitor este apelată, se întâmplă două lucruri

Funcția este pusă în coadă pentru execuție și returnează imediat un obiect futures incomplet.

Ulterior, când valoarea este primită, obiectul futures iese cu valoarea primită sau cu o eroare.

Pentru a obține valoarea returnată de viitor, utilizați metoda apoi() pentru a înregistra apelul invers.

În acest exemplu, atât clientul, cât și serverul folosesc futures pentru a trimite cereri și pentru a primi răspunsurile corespunzătoare. Programele client-server folosesc aproape întotdeauna futures pentru comunicare și alte tipuri de I/O asincrone.

Gestionarea cererilor de OPȚIUNI

Folosind o clasă HttpRequest, aplicația client slambook trimite solicitări atunci când utilizatorul face clic pe butonul „trimite”. Ai văzut codul mai devreme în acest articol.

Dacă clientul și serverul sunt de origini diferite, ceea ce este obișnuit în aplicații, o solicitare preflight este trimisă înainte de POST. Cererea preliminară trebuie să conțină mai întâi o solicitare OPȚIUNI pentru a determina ce cereri sunt în general permise. Clasa HttpRequest se ocupă automat de solicitările OPTIONS de zbor înainte. Nu mai trebuie să scrieți cod la nivelul clientului pentru asta.

Serverul primește o cerere preliminară de OPȚIUNI înainte de a primi cererea principală. Iată codul pentru aplicația slambookserver care procesează cererile OPȚIUNI.

Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. închide(); )

Acest cod face următoarele:

Obține un obiect HttpResponse care are grijă ca serverul să trimită un răspuns către client

Adaugă anteturi CORS pentru controlul accesului

Imprimă un mesaj pe consolă

Semnalează că răspunsul nu are conținut

Completează răspunsul care va fi trimis clientului.

Când clientul primește o solicitare, antetul CORS semnalează că cererile POST vor fi acceptate.

Configurarea antetelor CORS

Aplicația server folosește următoarea funcție pentru a adăuga anteturi pentru cererile OPTIONS și POST la răspunsul CORS. Funcția adaugă trei anteturi la răspunsul serverului Controlul accesului(care sunt incluse în HttpResponse).

Void addCorsHeaders(HttpResponse res) ( res.headers.add("Acces-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Control-Acces-Permite-anteturi", "Origine, X-Solicitat-Cu, Tip-Conținut, Accept"); )

Primele două rânduri ale antetului CORS permit solicitări POST și OPTIONS din orice origine. Al treilea determină tipul de solicitări POST și OPȚIUNI pe care serverul le permite să accepte cereri doar cu anumite antete.

Procesarea cererilor POST

Iată o funcție care se ocupă de solicitările clientului POST.

Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((List buffer) ( // Returnează datele înapoi către client. res.write("Mulțumesc pentru date. Iată ce te-am auzit spunând: "); res.write(new String.fromCharCodes(buffer)); res.close (); ), onError: printError); )

La fel ca o solicitare OPȚIUNI, slambookserver primește obiectul de răspuns HTTP de la cerere, tipărește un mesaj pe consolă și adaugă antete CORS la răspuns.

Apoi, acest cod ascultă datele din solicitarea POST a clientului. Dacă Toate datele sunt gata, se apelează funcția de apel invers. Această funcție este scrisă în același loc. Argumentul funcției este o listă de numere care include toate datele. Fiecare număr este reprezentat de un cod care poate fi reprezentat ca un caracter UTF-16. Dar nu trebuie să vă faceți griji pentru asta, deoarece puteți apela doar la metoda String.fromCharCodes pentru a converti într-un șir obișnuit.

Obiectul HttpResponse gestionează fluxurile de date pe care serverul le poate folosi pentru a trimite date înapoi către client. În cadrul funcției de apel invers, slambookserver scrie mesaje și date sursă ca șir în acest flux. Serverele mai complexe vor face ceva cu aceste date, cum ar fi stocarea pe un server, procesarea lor sau poate chiar retragerea banilor din contul dvs. bancar.

Când fluxul este închis, obiectul HttpResponse trimite date către client.

Exemplul de aplicație client-server slambook poate servi ca punct de plecare pentru propria dvs. aplicație client-server sau ca exemplu despre cum să vă construiți propriile aplicații.

Iată o mostră a ceea ce ar trebui să facă partea client.

Folosiți formulare pentru a colecta date despre utilizatori.

Plasați câmpuri de introducere pe formulare pentru elementele de date individuale.

Utilizați Polymer pentru feedback pentru a menține datele din formular sincronizate cu codul Dart.

Trimiteți date direct (proprietățile formularului de acțiune și metodă)

Sau programatic (înlocuind comportamentul implicit al codului butonului de trimitere Dart)

Creați un obiect răspuns pe server dintr-un obiect HttpRequest.

Asta ar trebui să facă serverul.

Utilizați HttpServer pentru a configura serverul și ascultați pe port.

Procesează răspunsurile.

Utilizați antetele CORS pentru a permite fiecare solicitare.

Răspunsul la cerere folosește HttpResponse.

Procesați datele în mod asincron folosind futures.

Utilizați fluxuri pentru a scrie date în răspuns.

Aceste resurse se bazează în mare parte pe biblioteci Dart care oferă suport pentru scrierea clienților și serverelor. Vă rugăm să rețineți că există două clase HttpRequest: una în dart:html(pentru clienți) și al doilea dart:io(pentru servere).

Resursă	Bibliotecă	Descriere
HttpRequest	dart:html	Partea client a solicitării HTTP
HttpRequest	dart:io	Pe partea de server de solicitare HTTP
HttpServer	dart:io	Partea server procesează comunicarea HTTP cu serverul
HttpResponse	dart:io	Partea de server care se ocupă de trimiterea răspunsurilor la cerere
Fluxuri	dart:async	Flux de date
Viitor	dart:async	O modalitate de a primi date asincron
JSON	dart:convertit	Declarație de conversie JSON implicită
Polimer	Polimer	Date despre elemente personalizate asociate unui șablon

Legare bidirecțională a datelor folosind polimer

Exemplul slambook folosește Polymer pentru feedback, valoarea unui element de intrare cu variabile Dart. Dacă utilizatorul modifică valoarea unui element de intrare, variabila asociată din codul Dart se modifică automat. Sau dacă valoarea se modifică în codul Dart, obiectul element personalizat asociat este actualizat automat. Articolul Definirea elementelor personalizate va oferi mai multe detalii despre legarea datelor și polimer.

Acest exemplu folosește, de asemenea, o declarație de gestionare a evenimentelor pentru a intercepta și procesa funcții pentru elementele de intrare.

Folosind exemplul slambook, puteți vedea cum este utilizată legarea bidirecțională a datelor pentru diferite elemente de intrare, inclusiv noile elemente HTML5. Acest tabel rezumă toate atributele bidirecționale pe care le puteți utiliza cu Polymer:

Utilizarea atributelor valoareîn orice element de intrare

Atribut valoare funcționează asupra oricăror elemente de intrare și asociază o valoare cu un șir Dart. Acest exemplu folosește valoare pentru caseta de bifare, caseta de introducere a textului, selectorul de culori, selectorul de date și selectorul de intervale.

(Rețineți că ceva cod în jur, de exemplu a fost eliminat pentru a face codul mai lizibil)

Un dicționar în cod Dart numit datele conţine date de formular. Codul obiectului dicționarului este evidențiat folosind @observabilși apeluri toObservable() pentru legare.

Dicționarul conține perechi cheie/valoare pentru fiecare element de intrare, unde cheia este un șir. Valorile elementelor asociate cu valoare sunt șiruri. HTML se referă la elementele dicționarului folosind numele lor (identificatorii) în Dart. De exemplu, valoarea selectorului de culori este asociată cu theData['favoriteColor'].

Utilizarea selectIndex într-un meniu vertical

Element conţine unul sau mai multe elemente , dar în mod implicit doar unul dintre ele poate fi selectat la un moment dat. Selectarea unui singur element este de obicei declarată ca o listă derulantă. Puteți utiliza atributul selectatIndex pentru a asocia o variabilă Dart de tipul întreg cu o listă derulantă. Numărul afișează indexul elementului selectat. Indicele începe de la 0.

Utilizare verificatîn casetele de selectare

Puteți utiliza atributul verificat Variabilă booleană Dart cu o casetă de selectare separată. Aici, fiecare casetă de selectare este asociată cu o variabilă booleană separată.

Una dintre cele mai populare funcții de pe site este cererea sau formularul de comandă, datele din care sunt trimise prin email proprietarului site-ului. De regulă, astfel de formulare sunt simple și constau din două sau trei câmpuri pentru introducerea datelor. Cum se creează un astfel de formular de comandă? Acest lucru necesită utilizarea limbajului de marcare HTML și a limbajului de programare PHP.

Limbajul de marcare HTML în sine este simplu; trebuie doar să vă dați seama cum și unde să puneți anumite etichete. Cu limbajul de programare PHP, lucrurile sunt puțin mai complicate.

Pentru un programator, crearea unui astfel de formular nu este dificilă, dar pentru un designer de layout HTML, unele acțiuni pot părea dificile.

Creați un formular de trimitere a datelor în html

Prima linie va fi după cum urmează

Acesta este un element foarte important al formularului. În el indicăm cum vor fi transferate datele și în ce fișier. În acest caz, totul este transferat folosind metoda POST în fișierul send.php. Programul din acest fișier trebuie să primească, în consecință, datele, acestea vor fi conținute în matricea de mesaje și să le trimită la adresa de e-mail specificată.

Să revenim la formă. Al doilea rând va conține un câmp pentru introducerea numelui complet. Are urmatorul cod:

Tipul formularului este text, adică utilizatorul va putea introduce sau copia text aici de la tastatură. Parametrul nume conține numele formularului. În acest caz, este fio; sub acest nume va fi transmis tot ceea ce utilizatorul a introdus în acest câmp. Parametrul substituent specifică ce va fi scris în acest câmp ca explicație.

Rândul următor:

Aici, aproape totul este la fel, dar numele câmpului este email, iar explicația este că utilizatorul își introduce adresa de email în acest formular.

Următoarea linie va fi butonul „trimite”:

Iar ultima linie din formular va fi eticheta

Acum să punem totul împreună.

Acum să facem obligatoriu câmpurile din formular. Avem următorul cod:

Creați un fișier care acceptă date din formularul HTML

Acesta va fi un fișier numit send.php

În fișier, în prima etapă, trebuie să acceptați date din matricea post. Pentru a face acest lucru, creăm două variabile:

$fio = $_POST["fio"];
$email = $_POST["e-mail"];

Numele de variabile în PHP sunt precedate de un semn $ și un punct și virgulă este plasat la sfârșitul fiecărei linii. $_POST este o matrice în care sunt trimise datele din formular. În formularul html, metoda de trimitere este specificată ca method="post". Deci, sunt acceptate două variabile din formularul html. Pentru a vă proteja site-ul, trebuie să treceți aceste variabile prin mai multe filtre - funcții php.

Prima funcție va converti toate caracterele pe care utilizatorul va încerca să le adauge în formular:

În acest caz, variabilele noi nu sunt create în php, ci sunt folosite cele existente. Ceea ce va face filtrul este să transforme personajul "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

A doua funcție decodifică adresa URL dacă utilizatorul încearcă să o adauge în formular.

$fio = urldecode($fio);
$email = urldecode($email);

Cu a treia funcție vom elimina spații de la începutul și sfârșitul liniei, dacă există:

$fio = trim($fio);
$email = trim($email);

Există și alte funcții care vă permit să filtrați variabilele php. Utilizarea lor depinde de cât de îngrijorat sunteți că un atacator va încerca să adauge cod de program la acest formular de trimitere prin e-mail html.

Validarea datelor transferate din formularul HTML în fișierul PHP

Pentru a verifica dacă acest cod funcționează și dacă datele sunt transferate, îl puteți afișa pur și simplu pe ecran folosind funcția ecou:

echo $fio;
ecou"
";
echo $fio;

A doua linie de aici este necesară pentru a separa rezultatul variabilelor php în linii diferite.

Trimiterea datelor primite dintr-un formular HTML la e-mail folosind PHP

Pentru a trimite date prin e-mail, trebuie să utilizați funcția de e-mail în PHP.

mail("la ce adresa se trimite", "subiectul scrisorii", "Mesajul (corpul scrisorii)","De la: de la care email este trimisa scrisoarea \r\n");

De exemplu, trebuie să trimiteți date către e-mailul proprietarului sau managerului site-ului [email protected].

Subiectul scrisorii trebuie să fie clar, iar mesajul scrisorii trebuie să conțină ceea ce utilizatorul a specificat în formularul HTML.

Poștă(" [email protected]", "Cerere de pe site", "Nume complet:".$fio.". E-mail: ".$email ,"De la: [email protected]\r\n");

Este necesar să adăugați o condiție care să verifice dacă formularul a fost trimis folosind PHP la adresa de e-mail specificată.

dacă (mail(" [email protected]", "Comanda de pe site", "Nume complet:".$fio.". E-mail: ".$email ,"De la: [email protected]\r\n"))
{
echo „mesaj trimis cu succes”;
) altfel (
}

Astfel, codul de program al fișierului send.php, care va trimite datele formularului HTML la e-mail, va arăta astfel:

$fio = $_POST["fio"];
$email = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//ecou "
";
//echo $email;
dacă (mail(" [email protected]", "Cerere de pe site", "Nume complet:".$fio.". E-mail: ".$email ,"De la: [email protected]\r\n"))
( echo "mesaj trimis cu succes";
) altfel (
echo „au apărut erori la trimiterea mesajului”;
}?>

Trei rânduri pentru a verifica dacă datele sunt transferate în fișier sunt comentate. Dacă este necesar, acestea pot fi eliminate, deoarece au fost necesare doar pentru depanare.

Am plasat codul HTML și PHP pentru trimiterea formularului într-un singur fișier

În comentariile acestui articol, mulți oameni pun întrebarea cum să vă asigurați că atât formularul HTML, cât și codul PHP pentru trimiterea datelor la e-mail sunt într-un singur fișier, și nu în două.

Pentru a implementa această lucrare, trebuie să plasați codul HTML al formularului în fișierul send.php și să adăugați o condiție care va verifica prezența variabilelor în matricea POST (această matrice este trimisă din formular). Adică, dacă variabilele din matrice nu există, atunci trebuie să arătați utilizatorului formularul. În caz contrar, trebuie să primiți date din matrice și să le trimiteți destinatarului.

Să vedem cum să schimbăm codul PHP din fișierul send.php:

//verifică dacă variabile există în matricea POST
if(!isset($_POST["fio"]) și !isset($_POST["email"]))(
?>

) altfel (
//arata formularul
$fio = $_POST["fio"];
$email = $_POST["e-mail"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
dacă (mail(" [email protected]", "Cerere de pe site", "Nume complet:".$fio.". E-mail: ".$email ,"De la: [email protected]\r\n"))(
echo „Mesajul trimis cu succes”;
) altfel (
echo „Au apărut erori la trimiterea mesajului”;
}
}
?>

Verificăm existența unei variabile în tabloul POST cu funcția PHP isset(). Un semn de exclamare înainte de această funcție într-o condiție înseamnă negație. Adică, dacă variabila nu există, atunci trebuie să ne arătăm forma. Dacă nu aș fi pus un semn de exclamare, condiția ar însemna literal „dacă există, atunci arată forma”. Și acest lucru este greșit în cazul nostru. Desigur, îl puteți redenumi în index.php. Dacă redenumiți fișierul, nu uitați să redenumiți numele fișierului în linie

. Formularul ar trebui să trimită către aceeași pagină, de exemplu index.php. Am adăugat titlul paginii la cod.

Erori frecvente care apar la trimiterea unui formular PHP de pe un site web

Prima, probabil cea mai populară greșeală, este atunci când vedeți o pagină albă goală fără mesaje. Aceasta înseamnă că ați făcut o eroare în codul paginii. Trebuie să activați afișarea tuturor erorilor în PHP și apoi veți vedea unde a fost făcută eroarea. Adăugați la cod:

ini_set("display_errors","On");
error_reporting ("E_ALL");

Fișierul send.php trebuie rulat doar pe server, altfel codul pur și simplu nu va funcționa. Este recomandabil ca acesta să nu fie un server local, deoarece nu este întotdeauna configurat pentru a trimite date către un server de e-mail extern. Dacă rulați codul nu pe server, atunci codul PHP va fi afișat direct pe pagină.

Astfel, pentru o funcționare corectă, recomand plasarea fișierului send.php pe găzduirea site-ului. De regulă, totul este deja configurat acolo.

O altă greșeală comună este atunci când apare notificarea „Mesaj trimis cu succes”, dar scrisoarea nu ajunge prin poștă. În acest caz, trebuie să verificați cu atenție linia:

dacă (mail(" [email protected]", "Comanda de pe site", "Nume complet:".$fio.". E-mail: ".$email ,"De la: [email protected]\r\n"))

În loc de [email protected] trebuie să existe o adresă de e-mail la care să fie trimisă scrisoarea, dar în schimb[email protected] trebuie să fie un e-mail existent pentru acest site. De exemplu, pentru un site web aceasta va fi . Doar în acest caz se va trimite o scrisoare cu datele din formular.