Odoslanie údajov z formulára. PHP formulár na odoslanie (POST, GET)

  • 21.05.2019

/php/php5en.png HTTP/1.0

: www.php5.ru

Na obrazovke prebehne to, čo by ste videli, keby ste sa pozreli na tento. png- súbor v textovom editore.

HTML formuláre. Spôsoby odosielania údajov na server pomocou formulára

Jednou z najbežnejších aplikácií akéhokoľvek serverového skriptovacieho jazyka je spracovanie HTML- formuláre. Webové programovanie je väčšinou spracovanie rôznych údajov zadaných používateľom.

PHP uľahčuje úlohu spracovania a analýzy formulárov prichádzajúcich z prehliadača, pretože všetky potrebné funkcie sú zabudované do jazyka na najnižšej úrovni. Preto programátor nemusí ani premýšľať o vlastnostiach protokolu HTTP a premýšľajte o tom, ako odosielať a prijímať

OD HTML-formy, s ktorými ste sa už stretli pri učení sa značkovacieho jazyka HTML.

Zvážte príklad odoslania správy z formulára prostredníctvom e-mailu.

Výpis email.html. Odoslanie správy z formulára prostredníctvom e-mailu

Odoslanie formulára e-mailom

Kliknite na Resetovať a dokončite objednávku.


Ak tento HTML kód spracuje prehliadač, zobrazí sa webová stránka, ktorú je možné vidieť na obrazovke monitora:

Používateľ klikne na tlačidlo "Obnoviť" a polia nadobudnú predvolené hodnoty. Formulár vyplní užívateľ stlačením tlačidla "Odoslať objednávku" odoslané na Táto e-mailová adresa je chránená pred spamovacími robotmi. Ak ju chcete vidieť, musíte mať povolený JavaScript. Prehliadač zvyčajne neposiela formulár sám, ale zveruje túto prácu poštovému programu, ktorý je štandardne nainštalovaný v operačnom systéme počítača (napríklad Outlook). List sa zasiela v tvare:

predmet: Formulár odoslaný z prehliadača Microsoft Internet Explorer

meno = Prokhorov Viktor Sergejevič

value= Táto e-mailová adresa je chránená pred spamovacími robotmi. Ak ju chcete vidieť, musíte mať povolený JavaScript

obj = "Pokyny"

List je zložený z dvojíc meno=hodnota, ktoré sa vyberajú v poradí z polí formulára.

Pozrime sa bližšie na nasledujúci príklad.

Výpis form_1.html

Zadajte svoje meno:

Uložením tohto kódu do súboru HTML form_1.html a pri jeho zobrazení pomocou prehliadača môžete vidieť formulár HTML:

Formulár je implementovaný kontajnerovou značkou . Značka svojimi atribútmi určuje:

Adresa skriptu, na ktorý bude formulár odoslaný;

Spôsob prenosu a charakteristika údajov obsiahnutých vo formulári. Základné a konečná tagy nastavujú hranice formulára. Ich označenie je povinné.

Atribúty značky kontajnera
(
všetko voliteľné):

? akcie--atribút, ktorého hodnota je špecifikovaná URL-adresa (úplná alebo príbuzná) žiadaného CGI-programy. Tento program spracuje údaje obsiahnuté vo formulári. Je povolené používať vstup MAILTO:URL. V tomto prípade bude formulár odoslaný e-mailom. Ak atribút akcie nie je zadaný, obsah formulára bude odoslaný na URL- adresu, z ktorej bola táto webová stránka načítaná, teda „na seba“. Toto je pohodlná skratka, ale podľa štandardu HTML je to atribút akcie požadovaný.

? metóda-- definuje metódu HTTP Používa sa na odosielanie údajov formulára z prehliadača na server. Atribút metóda môže nadobudnúť dve hodnoty: dostať alebo príspevok:

¦ dostať- odoslanie údajov formulára v paneli s adresou. Možno ste si na rôznych stránkach všimli prítomnosť symbolu „?“ na konci adresy URL. a nasledujúce údaje vo formáte parameter=hodnota. Tu "parameter" zodpovedá hodnote atribútu názov prvky formulára (pozri nižšie o značke ), a "význam"- atribút obsah hodnotu(napríklad obsahuje vstup používateľa v textovom poli toho istého tagu ).

Skúste napríklad niečo vyhľadať v Yandex a dávajte pozor na panel s adresou vášho prehliadača. Toto je cesta dostať.

¦ príspevok- údaje formulára sa odosielajú v tele žiadosti. Ak nie je úplne jasné (alebo úplne nepochopiteľné), čo to je - nebojte sa, čoskoro sa k tejto problematike vrátime.

Ak atribút metóda neuvedené - implicitné "dostať".

? enctype-- voliteľný atribút. Určuje typ obsahu formulára, ktorý sa používa na určenie formátu kódovania pri odosielaní formulára. AT HTML pre atribút sú definované dve možné hodnoty enctype:

¦ APPLICATION/X-WWW-FORM-URLENCODED(štandardne používané).

¦ VIACPARTIÁLNE/FORMÁTNE ÚDAJE.

Tag umožňuje vo formulári vytvoriť vstupné polia pre textový reťazec, názov súboru, heslo atď. žiadna koncová značka. Vlastnosti a vlastnosti použitia závisí od toho, ako sa používa.

Tag - určuje prvok formulára identifikovaný atribútom typu:

¦ Význam "text" určuje jednoriadkové pole na zadávanie textu.

¦ Význam "Predložiť" určuje tlačidlo, ktoré po kliknutí odošle formulár na server.

Sú možné aj iné hodnoty (a nie je jedinou značkou, ktorá definuje prvok formulára), ale budeme sa im venovať v neskorších kapitolách.

Čo sa teda stane po kliknutí na tlačidlo „OK“?

1. Prehliadač prezerá prvky obsiahnuté vo formulári a formuláre z ich atribútov názov a hodnotuúdaje formulára. Povedzme, že meno je zadané Vasya. V tomto prípade sú údaje formulára: meno=Vasya&okbutton=OK.

2. Prehliadač nadviaže spojenie so serverom, odošle serveru požiadavku na dokument uvedený v atribúte akcie tag pomocou metódy odosielania údajov uvedenej v atribúte metóda(v tomto prípade - GET) odovzdanie údajov formulára v žiadosti.

3. Server analyzuje prijatú požiadavku, vygeneruje odpoveď, odošle ju do prehliadača a uzavrie spojenie.

4. Prehliadač zobrazí dokument prijatý zo servera.

Ručné odoslanie rovnakej požiadavky (pomocou telnet) vyzerá takto (za predpokladu, že názov domény stránky je www.example.com).

HTML formuláre. $_POST a $_GET polia

HTML formuláre. Spôsoby odosielania údajov na server

Pravdepodobne ste sa už stretli s HTML formulármi:

Zadajte svoje meno:

Uložením tohto kódu do súboru HTML a jeho zobrazením vo vašom obľúbenom prehliadači sa vám zobrazí známy HTML formulár:

Zadajte svoje meno:

Tag
, ktorý má spárovaný koncový štítok, vlastne nastavuje formu. Jeho atribúty sú nepovinné:

  • action – Určuje URL (úplnú alebo relatívnu), na ktorú bude formulár odoslaný. Ak tento atribút nie je zadaný, väčšina prehliadačov (presnejšie všetky prehliadače, ktoré poznám) odošle formulár do aktuálneho dokumentu, teda „sám sebe“. Je to pohodlná skratka, ale štandard HTML vyžaduje atribút action.
  • spôsob – spôsob odoslania formulára. Sú dve.
    • GET - odoslanie údajov formulára v paneli s adresou.
      Možno ste si na rôznych stránkach všimli prítomnosť symbolu „?“ na konci adresy URL. nasledujú údaje vo formáte parameter=hodnota. Tu „parameter“ zodpovedá hodnote atribútu name prvkov formulára (pozri nižšie o značke ) a "value" - na obsah atribútu value (obsahuje napríklad vstup používateľa v textovom poli tej istej značky ).
      Skúste napríklad niečo vyhľadať v Yandex a dávajte pozor na panel s adresou vášho prehliadača. Toto je metóda GET.
    • POST - údaje formulára sa odosielajú v tele žiadosti. Ak nie je úplne jasné (alebo úplne nepochopiteľné), čo to je - nebojte sa, čoskoro sa k tejto problematike vrátime.
    Ak nie je špecifikovaný atribút metódy, predpokladá sa GET.

Tag - určuje prvok formulára definovaný atribútom type:

  • Hodnota "text" určuje jednoriadkové pole na zadávanie textu
  • Hodnota „submit“ určuje tlačidlo, ktoré po kliknutí odošle formulár na server

Sú možné aj iné hodnoty (a nie je jedinou značkou, ktorá definuje prvok formulára).

Čo sa teda stane, keď klikneme na tlačidlo „OK“?

  1. Prehliadač sa pozrie na prvky obsiahnuté vo formulári a vygeneruje údaje formulára z ich atribútov názvu a hodnoty. Povedzme, že je zadané meno Vasya. V tomto prípade sú údaje formulára name=Vasya&okbutton=OK
  2. Prehliadač nadviaže spojenie so serverom, odošle serveru požiadavku na dokument špecifikovaný v atribúte action značky
    , pomocou spôsobu odoslania údajov špecifikovaného v atribúte metódy (v tomto prípade GET), odovzdaním údajov formulára v požiadavke.
  3. Server analyzuje prijatú požiadavku, vygeneruje odpoveď, odošle ju do prehliadača a uzavrie spojenie
  4. Prehliadač zobrazí dokument prijatý zo servera

Ručné odoslanie rovnakej požiadavky (pomocou telnetu) vyzerá takto (za predpokladu, že názov domény stránky je www.example.com):

Telnet www.example.com 80 GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n Hostiteľ: www.example.com\r\n \r\n

Ako ste už možno uhádli, kliknutie na tlačidlo odoslania vo formulári so spôsobom odoslania „ZÍSKAŤ“ je rovnaké ako zadanie príslušnej adresy URL (s otáznikom a údajmi z formulára na konci) do panela s adresou prehliadača:

http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

V skutočnosti sa metóda GET používa vždy, keď požadujete dokument zo servera jednoduchým zadaním jeho adresy URL alebo kliknutím na odkaz. Použitím , k URL sa jednoducho pripojí otáznik a údaje formulára.

Možno sa vám všetky tieto technické detaily a cvičenia s telnetom zdajú neskutočne nudné a dokonca zbytočné („čo s tým má spoločné PHP?“). Ale márne. :) Toto sú základy práce s HTTP protokolom, ktoré musí vedieť každý webový programátor naspamäť a nie sú to teoretické znalosti – to všetko sa vám bude hodiť v praxi.

Teraz nahraďme prvý riadok nášho formulára nasledujúcim:

Zadali sme spôsob odoslania "POST". V tomto prípade sa údaje odosielajú na server trochu iným spôsobom:

Telnet www.example.com 80 POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n Hostiteľ: www.example.com\r\n Typ obsahu: application/x-www-form-urlencoded\r\ n Obsah-Dĺžka: 41263\r\n \r\n názov=Vasya&okbutton=OK

Pri použití metódy POST sa údaje formulára odosielajú po „dvoch vstupoch“ - v tele požiadavky. Čokoľvek vyššie je v skutočnosti hlavička požiadavky (a keď sme použili metódu GET, údaje formulára boli odoslané v hlavičke). Aby server vedel, na ktorom byte má ukončiť čítanie tela požiadavky, je v hlavičke prítomný riadok Content-Length; o tom, že údaje formulára sa budú odovzdávať v tvare parameter1=hodnota1¶meter2=hodnota2... a hodnoty sa prenášajú vo forme urlencode - teda rovnakým spôsobom ako pri metóde GET, ale v telo požiadavky - hlavička Content informuje server -Typ: application/x-www-form-urlencoded .

Výhodou metódy POST je, že neexistuje žiadne obmedzenie dĺžky dátového reťazca formulára.

Pri metóde POST nie je možné odoslať formulár jednoduchým „nasledovaním odkazu“, ako to bolo v prípade GET .

Keď používate formulár POST, v jeho atribúte action môžete zadať parametre formulára GET za otáznikom. Metóda POST teda zahŕňa aj metódu GET.

Polia $_GET a $_POST

Formuláre sú teda hlavným spôsobom výmeny údajov medzi webovým serverom a prehliadačom, to znamená, že poskytujú interakciu s používateľom - v skutočnosti to, na čo slúži webové programovanie.

Zvážte jednoduchý príklad:



if ($_SERVER [ "POŽIADAVKA_METHOD" ] == "POST" ) (
ozvena"

Ahoj, " . $_POST [ "meno" ] ."

!" ;
}
?>
">
Zadajte svoje meno:






Formulár zobrazený v riadkoch 8-12 obsahuje dva prvky: názov a tlačidlo ok . Atribút method určuje spôsob odoslania formulára POST, zatiaľ čo atribút action, ktorý označuje URL, na ktorú sa formulár odošle, sa vyplní hodnotou serverovej premennej PHP_SELF, teda adresou práve vykonávaného skriptu.

- skrátený tvar pre .

Predpokladajme, že sme do poľa názvu zadali hodnotu Vasya a klikli na tlačidlo OK. Prehliadač potom odošle požiadavku POST na server. Telo požiadavky: name=Vasya&okbutton=OK . PHP automaticky vyplní pole $_POST:

$_POST [ "meno" ] = "Vasya"
$_POST [ "okbutton" ] = "OK"

V skutočnosti je hodnota "Vasya" odoslaná prehliadačom vo forme urlencode; pre kódovanie windows-1251 táto hodnota vyzerá ako %C2%E0%F1%FF . Keďže ale PHP vykoná potrebné dekódovanie automaticky, môžeme na túto funkciu „zabudnúť“ – až kým nebudeme musieť s HTTP požiadavkami pracovať manuálne.

Keďže telo požiadavky špecifikuje iba názvy a hodnoty, nie typy prvkov formulára, PHP netuší, či $_POST["name"] zodpovedá vstupnému reťazcu, tlačidlu alebo zoznamu. Ale tieto informácie naozaj nepotrebujeme. :)

Keďže nepotrebujeme vedieť, čo je napísané na tlačidle odoslania, na riadku 11 môžeme odstrániť atribút name a skrátiť popis tlačidla na . V tomto prípade prehliadač odošle požiadavku POST name=Vasya.

A teraz - to isté, ale pre formulár GET:



if (isset($_GET [ "meno" ])) (
ozvena"

Ahoj, " . $_GET [ "meno" ] ."

!" ;
}
?>
">
Zadajte svoje meno:







Na riadok 8 by sa dalo rovnako dobre napísať
: GET je predvolená metóda. Tentoraz prehliadač odošle požiadavku GET, ktorá je ekvivalentom zadania adresy do panela s adresou: http://site-address/script-name.php?name=Vasya.

PHP robí presne to isté s formulármi GET ako s POST , s tým rozdielom, že pole $_GET je vyplnené.

Zásadný rozdiel je v riadku 4. Keďže jednoduché zadanie adresy do riadku prehliadača je požiadavkou GET, kontrola if ($_SERVER["REQUEST_METHOD"] == "GET") nemá význam. Preto sa uchýlime ku konštrukcii isset(), ktorá vráti true, ak je daná premenná definovaná (t. j. bola jej priradená hodnota), a false, ak premenná definovaná nie je. Ak bol formulár vyplnený - ako ste už pochopili, PHP automaticky priradí $_GET["name"] príslušnú hodnotu.

Metóda kontroly isset() je univerzálna, možno ju použiť aj pre formulár POST. Okrem toho je to výhodnejšie, pretože vám umožňuje presne zistiť, ktoré polia formulára sú vyplnené.

Trochu zložitejší príklad.




echo "Zadajte meno!
" ;
< 1900 || $_POST [ "year" ] > 2004 ) {
ozvena
"
;
) inak (

" ;

echo "Ty" . $vek. "roky."
" ;
}
ozvena"


" ;
}
?>
">
Zadajte svoje meno:


Zadajte rok narodenia:







Nepoužívajú sa tu žiadne nové triky. Zistite to, spustite kód, skúste ho upraviť...

Zmeňme posledný príklad tak, aby používateľ nemusel znova vypĺňať polia. Ak to chcete urobiť, vyplňte atribúty hodnôt prvkov formulára hodnotami, ktoré sme práve zadali.



$name = isset($_POST [ "meno" ]) ? $_POST [ "meno" ] : "" ;
$year = isset($_POST [ "rok" ]) ? $_POST [ "rok" ] : "" ;

If (isset($_POST [ "meno" ], $_POST [ "rok" ])) (
if ($_POST [ "meno" ] == "" ) (
echo "Zadajte meno!
" ;
) inak, ak ($_POST [ "rok" ]< 1900 || $_POST [ "year" ] > 2004 ) {
ozvena "Zadajte rok narodenia! Platný rozsah: 1900..2004
"
;
) inak (
echo "Ahoj," . $_POST [ "meno" ] . "!
" ;
$vek = 2004 – $_POST["rok"];
echo "Ty" . $vek. "roky."
" ;
}
ozvena"


" ;
}
?>
">
Zadajte svoje meno:


Zadajte rok narodenia:







Riadky 4 a 5 sa môžu ukázať ako trochu nezrozumiteľné. Je to veľmi jednoduché: riadok 4 by sa dal napísať takto:

if (isset($_POST [ "meno" ]))
$name = $_POST["meno"];
inak
$meno = "" ;

Môže nastať otázka - prečo nevyhodiť riadky 4-5 a nenapísať:

Zadajte svoje meno: ">

Zadajte rok narodenia: ">

Faktom je, že ak tieto premenné POST nie sú definované - a budú, ak formulár ešte nebol vyplnený - PHP vydá varovania o použití neinicializovaných premenných (a celkom správne: takáto správa vám umožní rýchlo nájsť ťažko nájsť preklepy v názvoch premenných a tiež varuje pred možnými „dierami“ na stránke). Isset kód môžete samozrejme vložiť priamo do formulára, ale ukáže sa to ako príliš ťažkopádne.

Mám to? Teraz sa pokúste nájsť chybu vo vyššie uvedenom kóde. No, nie tak celkom chyba - ale chyba.

htmlspecialchars()

Nenašli ste to? Vyzvem. Do poľa „meno“ zadajte napríklad dvojitú úvodzovku a nejaký text, napríklad Vasya. Odošlite formulár a pozrite sa na zdrojový kód prijatej stránky. Štvrtý riadok bude niečo ako:

Zadajte svoje meno:

Teda nič dobré. Čo ak prefíkaný používateľ zadal kód JavaScript?

Na vyriešenie tohto problému musíte použiť funkciu htmlspecialchars(), ktorá nahradí servisné znaky ich HTML reprezentáciou (napríklad citát s "):



$name = isset($_POST [ "meno" ]) ? htmlspecialchars ($_POST [ "meno" ]): "" ;
$year = isset($_POST [ "rok" ]) ? htmlspecialchars ($_POST [ "rok" ]): "" ;

If (isset($_POST [ "meno" ], $_POST [ "rok" ])) (
if ($_POST [ "meno" ] == "" ) (
echo "Zadajte meno!
" ;
) inak, ak ($_POST [ "rok" ]< 1900 || $_POST [ "year" ] > 2004 ) {
ozvena "Zadajte rok narodenia! Platný rozsah: 1900..2004
"
;
) inak (
echo "Ahoj," . $name . "!
" ;
$vek = 2004 – $_POST["rok"];
echo "Ty" . $vek. "roky."
" ;
}
ozvena"


" ;
}
?>
">
Zadajte svoje meno:


Zadajte rok narodenia:







Zopakujte experiment a uistite sa, že kód HTML je teraz správny.

Pamätajte - funkcia htmlspecialchars() sa musí použiť vždy, keď sa zobrazí obsah premennej, ktorá môže obsahovať špeciálne znaky HTML.

phpinfo()

Funkcia phpinfo() je jednou z najdôležitejších funkcií v PHP. Zobrazuje informácie o nastaveniach PHP, hodnoty rôznych konfiguračných premenných...

Prečo to spomínam v článku o formulároch? phpinfo() je najpohodlnejší nástroj na ladenie. phpinfo() vypisuje okrem iného hodnoty všetkých premenných $_GET, $_POST a $_SERVER. Ak sa teda premenná formulára „stratí“, najjednoduchší spôsob, ako zistiť, čo je zlé, je použiť funkciu phpinfo(). Aby funkcia zobrazovala iba hodnoty premenných (a nemuseli ste listovať desiatkami stránok), mala by sa volať nasledovne: phpinfo(INFO_VARIABLES); , alebo - čo je presne to isté - phpinfo(32) ;.



">
Zadajte svoje meno:


phpinfo(32);
?>



Alebo napríklad táto situácia: chcete vedieť IP adresu návštevníka. Pamätáte si, že zodpovedajúca premenná je uložená v poli $_SERVER, ale - smola - zabudli ste, ako sa premenná presne volá. Opäť voláme phpinfo(32); , vyhľadajte svoju IP adresu v tabuľke a nájdite ju - v riadku $_SERVER["REMOTE_ADDR"] .

Jednou z najžiadanejších funkcií na stránke je prihláška alebo objednávkový formulár, z ktorého sa údaje odosielajú na poštu majiteľa stránky. Takéto formuláre sú spravidla jednoduché a pozostávajú z dvoch alebo troch polí na zadávanie údajov. Ako vytvoriť takýto objednávkový formulár? Vyžaduje si to použitie značkovacieho jazyka HTML a programovacieho jazyka PHP.

Samotný značkovací jazyk HTML je jednoduchý, musíte len prísť na to, ako a kam umiestniť určité značky. S programovacím jazykom PHP sú veci trochu komplikovanejšie.

Pre programátora nie je ťažké vytvoriť takýto formulár, no niektoré úkony sa môžu javiť ako zložité pre HTML kódera.

Vytvorenie html formulára na odoslanie

Nasleduje prvý riadok

Toto je veľmi dôležitý prvok formulára. V ňom uvádzame, ako sa budú údaje prenášať a do ktorého súboru. V tomto prípade sa všetko posiela metódou POST do súboru send.php. Program v tomto súbore musí akceptovať údaje, budú obsiahnuté v poli príspevkov a poslať ich na zadanú e-mailovú adresu.

Vráťme sa k forme. Druhý riadok bude obsahovať pole pre zadanie celého mena. Má nasledujúci kód:

Typ formulára je text, to znamená, že používateľ sem bude môcť zadávať alebo kopírovať text z klávesnice. Parameter name obsahuje názov formulára. V tomto prípade je to fio, pod týmto názvom sa bude prenášať všetko, čo používateľ zadá do tohto poľa. Parameter zástupného symbolu určuje, čo sa do tohto poľa zapíše ako vysvetlenie.

Ďalší riadok:

Tu je takmer všetko rovnaké, ale názov poľa je zadaný ako e-mail a vysvetlenie je určené pre používateľa, aby do tohto formulára zadal svoju e-mailovú adresu.

Ďalší riadok bude tlačidlo Odoslať:

A posledný riadok vo formulári bude tag

Teraz to dáme dokopy.





Teraz urobme polia vo formulári povinnými. Máme nasledujúci kód:





Vytvorte súbor, ktorý prijíma údaje z formulára HTML

Toto bude súbor s názvom send.php

V súbore musíte v prvej fáze prijať údaje z poľa príspevkov. Aby sme to dosiahli, vytvoríme dve premenné:

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

Názvy premenných v php sú označené znakom $ a na konci každého riadku je umiestnená bodkočiarka. $_POST je pole, do ktorého sa prenášajú údaje z formulára. Vo formulári html je uvedená metóda odosielania = "post". Takže z html formulára sú prevzaté dve premenné. Pre účely ochrany vašej stránky musíte tieto premenné preniesť cez niekoľko filtrov – php funkcie.

Prvá funkcia skonvertuje všetky znaky, ktoré sa používateľ pokúsi pridať do formulára:

V tomto prípade sa nevytvárajú nové premenné v php, ale používajú sa existujúce. Filter urobí konverziu znaku "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

Druhá funkcia dekóduje adresu URL, ak sa ju používateľ pokúsi pridať do formulára.

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

Pomocou tretej funkcie odstránime medzery zo začiatku a konca reťazca, ak nejaké existujú:

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

Existujú ďalšie funkcie, ktoré vám umožňujú filtrovať premenné php. Ich použitie závisí od toho, ako veľmi sa bojíte, že sa útočník pokúsi pridať programový kód do tejto formy odosielania údajov do html pošty.

Overte údaje odovzdané z formulára HTML do súboru PHP

Ak chcete skontrolovať, či tento kód funguje, ak sa údaje prenášajú, môžete ich jednoducho zobraziť na obrazovke pomocou funkcie echo:

echo $fio;
ozvena"
";
echo $fio;

Druhý riadok je potrebný na oddelenie výstupu premenných php do rôznych riadkov.

Odoslanie prijatých údajov z HTML formulára na mail pomocou PHP

Na odosielanie údajov na poštu je potrebné použiť funkciu pošty v PHP.

mail("na ktorú adresu poslať", "predmet listu", "Správa (telo listu)","Od: z ktorého emailu je list odoslaný \r\n");

Napríklad musíte odoslať údaje na e-mail vlastníka alebo manažéra stránky [e-mail chránený]

Predmet e-mailu by mal byť jasný a správa e-mailu by mala obsahovať to, čo používateľ uviedol vo formulári HTML.

mail(" [e-mail chránený]", "Aplikácia zo stránky", "Názov:".$fio.". Email: ".$email ,"Od: [e-mail chránený]\r\n");

Musíte pridať podmienku, ktorá skontroluje, či bol formulár odoslaný pomocou PHP na zadanú e-mailovú adresu.

if (mail(" [e-mail chránený]", "Objednať zo stránky", "Názov:".$fio.". Email: ".$email ,"Od: [e-mail chránený]\r\n"))
{
echo "správa bola úspešne odoslaná";
) inak (
}

Programový kód súboru send.php, ktorý odošle údaje formulára HTML na poštu, bude teda vyzerať takto:

$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;
// echo "
";
//echo $email;
if (mail(" [e-mail chránený]", "Aplikácia zo stránky", "Názov:".$fio.". Email: ".$email ,"Od: [e-mail chránený]\r\n"))
( echo "správa bola úspešne odoslaná";
) inak (
echo "pri odosielaní správy sa vyskytli chyby";
}?>

Tri riadky na kontrolu, či sa údaje odovzdávajú do súboru, sú zakomentované. V prípade potreby ich možno odstrániť, pretože boli potrebné iba na ladenie.

Umiestnite kód na odoslanie formulára HTML a PHP do jedného súboru

V komentároch k tomuto článku sa veľa ľudí pýta, ako urobiť HTML formulár aj PHP kód na odosielanie dát na mail v jednom súbore, nie v dvoch.

Na implementáciu tejto práce je potrebné umiestniť HTML kód formulára do súboru send.php a pridať podmienku, ktorá bude kontrolovať prítomnosť premenných v poli POST (toto pole sa odovzdáva z formulára). To znamená, že ak premenné v poli neexistujú, musíte používateľovi ukázať formulár. V opačnom prípade musíte zobrať údaje z poľa a odoslať ich adresátovi.

Pozrime sa, ako zmeniť PHP kód v súbore send.php:



Webový formulár žiadosti


//kontrola, či existujú premenné v poli POST
if(!isset($_POST["fio"]) a !isset($_POST["e-mail"]))(
?>




) inak (
//zobraziť formulár
$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);
if (mail(" [e-mail chránený]", "Aplikácia zo stránky", "Názov:".$fio.". Email: ".$email ,"Od: [e-mail chránený]\r\n"))(
echo "Správa bola úspešne odoslaná";
) inak (
echo "Pri odosielaní správy sa vyskytli chyby";
}
}
?>



Existenciu premennej v poli POST skontrolujeme funkciou PHP isset(). Výkričník pred touto funkciou v podmienke znamená negáciu. To znamená, že ak premenná neexistuje, musíme ukázať našu formu. Ak by som nedal výkričník, potom by podmienka doslova znamenala - "ak existuje, ukážte formulár". A to je v našom prípade nesprávne. Samozrejme, môžete ho premenovať na index.php. Ak premenujete súbor, nezabudnite premenovať názov súboru a v riadku
. Formulár musí odkazovať na rovnakú stránku, napríklad index.php. Do kódu som pridal názov stránky.

Bežné chyby, ktoré sa vyskytujú pri odosielaní formulára PHP z webovej stránky

Prvá, pravdepodobne najobľúbenejšia chyba, je, keď vidíte prázdnu bielu stránku bez správ. To znamená, že ste urobili chybu v kóde stránky. Treba si zapnúť zobrazovanie všetkých chýb v PHP a následne uvidíte, kde sa stala chyba. Pridať do kódu:

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

Súbor send.php musí byť spustený iba na serveri, inak kód jednoducho nebude fungovať. Je žiaduce, aby to nebol lokálny server, pretože nie je vždy nakonfigurovaný na odosielanie údajov na externý poštový server. Ak spustíte kód na inom serveri, ako je server, potom uvidíte PHP kód priamo na stránke.

Preto pre správnu prácu odporúčam umiestniť súbor send.php na hosting stránky. Tam je už spravidla všetko nakonfigurované.

Ďalšou častou chybou je, keď sa zobrazí upozornenie „Správa bola úspešne odoslaná“, ale list nepríde poštou. V tomto prípade musíte starostlivo skontrolovať riadok:

if (mail(" [e-mail chránený]", "Objednať zo stránky", "Názov:".$fio.". Email: ".$email ,"Od: [e-mail chránený]\r\n"))

Namiesto [e-mail chránený] by mala byť e-mailová adresa, na ktorú chcete poslať list, ale namiesto[e-mail chránený] musí to byť existujúci e-mail pre túto stránku. Napríklad pre webovú lokalitu by to bolo . Iba v tomto prípade bude odoslaný list s údajmi z formulára.

Mnoho webových aplikácií používa formuláre na zhromažďovanie údajov a odosielanie údajov na server. Formuláre zvyčajne obsahujú niekoľko prvkov na zadávanie údajov rôzneho typu, ako je meno, adresa, dátum narodenia, emailová adresa a pod. HTML podporuje niekoľko typov vstupných prvkov vrátane textových polí, prepínačov a začiarkavacích políčok. HTML5 pridáva ďalšie špeciálne prvky, ako je e-mail, pole pre heslo, výber farby, widgety dátumu a času, posúvače.

Hlavný príklad tejto príručky obsahuje časť klienta a servera. Klientska strana využíva Polymer na poskytovanie užívateľského rozhrania (formuláre obsahujú mnoho typov vstupných prvkov) a rozhrania na synchronizáciu dát s Dart. Klient a server komunikujú pomocou niektorých tried z rôznych knižníc, vrátane streamov, futures, HttpRequest a tak ďalej. Server používa hlavičky CORS na povolenie požiadaviek medzi doménami.

Komentujte tento článok stavia na tom, čo čítate v sekciách: Vytváranie vlastných prvkov ,Používanie Futures API Dynamické spracovanie údajov a mali by ste byť oboznámení s knižnicou Polymer, futures, JSON a HttpRequest.

Všeobecné informácie o formulároch

Formuláre majú vlastnosť akcie, čo je adresa URL na odoslanie údajov formulára a metóda ktorý určuje, ako sa majú údaje odosielať. Vlastnosti akcie a metódy možno definovať priamo v HTML, alebo v zložitejšom prípade, alebo ak chcete získať väčšiu kontrolu, môžete napísať kód Dart a použiť knižnice Dart na odhalenie týchto vlastností programovo.

Začnime základmi, len formulármi HTML, aby sme pochopili vlastnosti akcie a metódy vstupných prvkov a pochopili štandardné správanie formulárov. Nižšie uvedený formulár, priložený štítkom , slúži na vyhľadávanie údajov zadaných používateľom v službe Google. Ak je začiarkavacie políčko začiarknuté, informácie sa na stránke vyhľadávajú (a ak nie, na internete). Tento príklad s názvom search_form štandardne vyhľadáva užitočné zdroje „kuchárskej knihy“ na dartlang.org.

Tu je HTML kód na vytvorenie formulára:

Použitie atribútov akcie a metódy.

A tu je kód HTML, ktorý do formulára pridáva tri vstupné prvky – textové pole, tlačidlo odoslania a začiarkavacie políčko.

Začiarkavacie políčko je zabalené do štítku, takže hodnotu môžete zmeniť kliknutím na samotné začiarkavacie políčko aj na hlavičku.

Tento kód HTML poskytuje určité automatické správanie.

****

Vytvorí špeciálne tlačidlo, ktoré po kliknutí spôsobí odoslanie údajov formulára. Na základe atribútov akcie a metódy tlačidlo vygeneruje požiadavku a odošle ju na server na zadanú adresu URL.

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

definuje názov textového poľa a názov začiarkavacieho políčka.

Pre prvky vo formulári, ktoré majú názov, poskytnite údaje pre tento formulár. V tomto príklade je hodnota poskytnutá textovým poľom hodnotou pre q a začiarkavacie políčko poskytuje hodnotu pre vyhľadávanie na stránkach, oba tieto parametre sú súčasťou platnej adresy URL pre žiadosť Google. Keď používateľ klikne na tlačidlo, do adresy URL vyhľadávania sa pridá názov a zodpovedajúca hodnota. Tu je príklad žiadosti:

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

Tento príklad je kompletne zostavený bez akéhokoľvek Dart alebo Javascript kódu. Keďže je to veľmi jednoduché, môže používať bežné správanie HTML: verejne prístupné a ľahko vytvoriteľné URL, ako aj bežnú požiadavku GET. Pre formuláre, ktoré obsahujú veľa údajov, alebo pre webovú aplikáciu, ktorá komunikuje so špecializovaným serverom, zvyčajne potrebujete spracovať formulár programovo.

Nasledujúci príklad ukazuje zložitejší formulár, ktorý programovo odosiela údaje na server pomocou požiadavky POST.

Najmä príklad slambooku

Táto časť obsahuje dva programy ako základné príklady.

    Prvým je bežný serverový program s názvom slambookserver, ktorý počúva na lokálnom počítači na porte 4040 a spracováva požiadavky POST a OPTIONS vytváraním správ a odosielaním potvrdenia klientovi. Server používa hlavičky CORS, aby umožnil aplikácii používať požiadavky odoslané z iných serverov.

    Druhým je klientsky program s názvom slambook, ktorý poskytuje formulár, do ktorého môže používateľ zadávať informácie. Tento program používa Polymér na dvojité viazanie údajov medzi vstupnými prvkami a premennými Dart. Keď používateľ klikne na tlačidlo, kód Dart skonvertuje údaje na reťazec JSON, odošle požiadavku OPTIONS na získanie povolenia zo servera a potom odošle požiadavku POST na odoslanie údajov. Po prijatí požiadavky zo servera sa táto zobrazí klientovi.

Nasledujúci diagram zobrazuje komunikačnú sekvenciu medzi serverom a klientom v tomto príklade.


Skús to! Zadajte akékoľvek údaje a kliknite na tlačidlo Odoslať.

Poznámka k verzii. Aplikácia slambook je kompatibilná s polymer.dart 0.9.

Požiadavka vráti správu "Žiadny server", pretože ste nespustili server na vašom počítači. Poďme to napraviť.

Spustenie servera

Zdrojový kód hlavného serverového programu slambookserver.dart si môžete stiahnuť z príkladov v príručke

Spustite program servera z príkazového riadku

% dart slambookserver.dart Počúvanie GET a POST na http://127.0.0.1:4040

Teraz môžete znova skúsiť odoslať údaje z aplikácie slambook vyššie.

Komentujte: Ak už port 4040 používa nejaký iný program, server vráti chybovú správu a ukončí vykonávanie. Program na tejto stránke očakáva, že slambookserver sa nachádza na lokálnom počítači, port 4040. Preto, aby aplikácia bežala, musíte ukončiť druhý proces a znova spustiť slambookserver. Alebo môžete zmeniť číslo portu v serverovom a klientskom programe. Vyhnite sa používaniu 3030, pretože ho používa Dart Editor. Potom spustite klienta a server na vašom lokálnom počítači.

Zvyšok tohto návodu vysvetľuje kód servera a klienta.

O klientskej strane sa dozviete o:

    Odoslanie údajov formulára

    Obnovenie formulára

    Použitie polyméru na prepojenie údajov formulára

Časť servera v tejto časti bude hovoriť o:

    CORS hlavičky

    Spracovanie požiadaviek OPTIONS

    Spracovanie žiadostí POST

Odoslanie údajov formulára

Najprv sa pozrime na to, ako sa údaje odosielajú na server.

Pripomeňme, že príklad search_form bol založený na použití atribútov action a method na nastavenie cieľa a metódy na odoslanie formulára. Pamätajte tiež, že príklad search_form sa spolieha na automatické správanie vlastného tlačidla odoslania. Na druhej strane, príklad slambooku je priamo zapojený do procesu odosielania:

    Po prvé, vo formulári nie je definovaná ani akcia, ani metóda

    Po druhé, tlačidlo Odoslať má v Dart obsluhu kliknutia

    Po tretie, obsluha kliknutia prepíše automatické správanie tlačidla Odoslať

    Nakoniec sa údaje formulára odošlú na server pomocou knižníc Dart

Formulár v príklade slambooku predstavuje vlastný prvok tute-slambook-forma, ktorý je reprezentovaný nasledujúcim HTML kódom:

Všimnite si absenciu atribútov akcie a metódy. Namiesto toho je správanie tlačidla Odoslať definované v obslužnom nástroji kliknutia na tlačidlo v Dart. Nižšie je uvedený kód HTML, ktorý vytvorí tlačidlo odoslania a naviaže ho na ovládač Dart.

A kód samotného obslužného programu kliknutia na tlačidlo submitForm():


Pozrime sa na každý prvok kódu handlera

Zrušenie predvoleného obslužného programu

Táto udalosť nemá žiadne atribúty akcie a metóda, tlačidlo Odoslať obsahuje automatické správanie, ktoré v príklade slambooku nie je potrebné. Prvý riadok kódu obsluhy teda volá e.preventDefault(), aby prepísal predvolené správanie tlačidla.

Void submitForm(Event e) ( e.preventDefault(); // Nerobte predvolené odosielanie. … )

Nastavenie a odoslanie požiadavky POST

Ďalšia časť kódu vytvorí objekt HttpRequest. Tento kód používa nové na vytvorenie inštancie objektu HttpRequest, ktorý sa používa na nastavenie a odoslanie požiadavky POST. Trieda HttpRequest má zodpovedajúcu funkciu getString(), takže môžete použiť a odoslať normálne požiadavky GET na URL.

Ďalší riadok poskytuje objektu HttpRequest funkciu spätného volania onData, ktorý sa volá pri prijatí odpovede zo servera. Na podrobnosti deklarácie funkcie onData() sa pozrieme neskôr.

Dôležité: Pred odoslaním požiadavky musíte zaregistrovať funkciu spätného volania!

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

Nakoniec funkcia odošle údaje formulára na server ako reťazec JSON. Niekedy sa údaje odosielajú po častiach. Tento príklad je však dostatočne malý na to, aby sa údaje odosielali všetky naraz. Táto požiadavka je asynchrónna, takže metóda send() sa dokončí hneď po odoslaní požiadavky.

Čaká sa na odpoveď zo servera

Objekt HttpRequest komunikuje so serverom. Stav môžete získať pomocou poľa readyState Objekt HttpRequest. Stav pripravenosti môže nadobúdať päť rôznych hodnôt: neodoslané (neodoslané), otvorené (otvorené), prijaté hlavičky (prijaté hlavičky), načítavanie (načítavanie) a hotovo (hotovo). Keď sa zmení stav pripravenosti, HttpRequest spustí udalosť a zavolá sa spätné volanie onData().

Vyvolajte riadok kódu, v ktorom je zaregistrovaná obsluha udalosti onReadyStateChange:

Request.onReadyStateChange.listen(onData);

Jediným požadovaným argumentom metódy listen() je funkcia spätného volania s podpisom: void onData(T). Metóda listen() vám tiež umožňuje zadať tri ďalšie argumenty, ako je napríklad obsluha chýb.

Nižšie je uvedená funkcia spätného volania onData():

Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Údaje uložené OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Stav je 0...s najväčšou pravdepodobnosťou server nebeží. serverResponse = "Žiadny server"; ) )

Prvá vec, ktorú kód ukazuje, je, či bola požiadavka úspešne dokončená. Ak áno, potom sa obsah odpovede umiestni do riadku s názvom serverResponse, ktorý je viazaný na hodnotu prvku textarea aplikácie slambook. Po zmene reťazca sa používateľské rozhranie automaticky aktualizuje a používateľovi sa zobrazí správa.

Ak sa požiadavka vykoná s chybou, program sa zobrazí v serverResponse chybové hlásenie, ktoré sa zobrazí používateľovi.

Resetovanie údajov formulára

Tlačidlo reset je špeciálny vstupný prvok HTML, ktorý štandardne vymaže hodnoty zadané do tohto formulára. Namiesto toho chceme, aby tlačidlo obnovilo hodnoty formulára na pôvodné hodnoty. Preto musí obslužný program kliknutia pre tlačidlo reset prepísať automatické správanie a vyplniť údaje explicitne.

Void resetForm(Event e) ( e.preventDefault(); favoriteThings["mačiatka"] = false; FavoriteThings["dažďové kvapky"] = false; favoriteThings["rukavice"] = false; obľúbenéThings["kanvice"] = false; theData ["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"; theData["birthday"] = "2013-01-01"; theData["zväzok "] = "0"; theData["catOrDog"] = "mačka"; theData["hudba"] = 0; theData["zombies"] = false; serverResponse = "Resetovanie údajov."; )

Vytvorenie back-endu a počúvanie na porte

Teraz sa pozrime na stranu servera, ktorá sa nazýva slambookserver, vráti HTTP odpoveď na požiadavku odoslanú z klientskej aplikácie slambook. Kód na strane servera je založený na článku [Using Dart to create JSON Web services (#)

Server počúva na porte 4040 na lokálnom počítači a spracuje iba požiadavky POST a OPTIONS. Oba typy žiadostí používajú na umožnenie prístupu hlavičky CORS. V prípade požiadaviek POST server vráti krátku potvrdzujúcu správu, ktorá obsahuje údaje JSON, ktoré prijal z požiadavky.

Poďme sa pozrieť na kód.

Funkcia main() aplikácie slambookserver je úplne zobrazená nižšie. Pomocou triedy HttpServer začne aplikácia slambookserver počúvať na porte 4040 lokálneho počítača po zavolaní funkcie najvyššej úrovne viazať()

Finálny HOST = "127.0.0.1"; konečný PORT = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); )

Funkcia bind() vracia budúcnosť, ktorú možno použiť na získanie hodnoty v budúcnosti (viac informácií už za minútu). Funkcia then() registruje dve funkcie spätného volania ako budúcnosť. Prvá funkcia je gotMessage(), ktorá sa volá, keď budúcnosť dostane hodnoty. Po druhé printError Volá sa, keď zlyhá pokus o pripojenie. Chyba môže nastať napríklad vtedy, ak na rovnakom porte už počúva iný program.

Filtrovanie požiadaviek a volanie iných metód na spracovanie každého typu požiadavky na funkciu gotMessage() nižšie.

Void gotMessage(_server) ( _server.listen((požiadavka HttpRequest) ( switch (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( request); ) ), onError: printError); // Počúvanie zlyhalo.print("Počúvanie GET a POST na http://$HOST:$PORT"); )

Na spracovanie iných typov požiadaviek, ako je GET, stačí pridať ďalšie hodnoty prípad napríklad prípad 'GET'.

Trochu o budúcnosti.

Poďme sa na chvíľu pozrieť na futures, kým sa dostaneme do kódu na spracovanie požiadaviek POST a OPTIONS.

Budúcnosť predstavuje spôsob, ako získať hodnotu niekedy v budúcnosti. Futures používate, aby ste zabránili zablokovaniu programu počas čakania na údaje, napríklad ak je potrebný dlhý výpočet na poskytnutie hodnoty, alebo ak je potrebné hodnotu prečítať alebo získať pomocou I/O.

Keď sa zavolá funkcia, ktorá vracia budúcnosť, stanú sa dve veci.

    Funkcia sa zaradí do frontu na vykonanie a okamžite vráti neúplný budúci objekt.

    Neskôr, keď je hodnota prijatá, budúci objekt skončí s prijatou hodnotou alebo s chybou.

Ak chcete získať hodnotu vrátenú budúcnosťou, použite metódu potom() na registráciu spätného volania.

V tomto príklade strana klienta aj strana servera používajú futures na odosielanie požiadaviek a prijímanie zodpovedajúcich odpovedí. Programy klient-server takmer vždy používajú futures na komunikáciu a iné formy asynchrónneho I/O.

Spracovanie požiadaviek OPTIONS

S triedou HttpRequest, klientska aplikácia slambook odosiela požiadavky, keď používateľ klikne na tlačidlo odoslať. Kód ste videli skôr v tomto článku.

Ak sú klient a server odlišného pôvodu, čo je spoločné pre aplikácie, pred POST sa odošle požiadavka na kontrolu pred výstupom. Požiadavka na kontrolu pred výstupom musí najprv obsahovať požiadavku OPTIONS na určenie, ktoré požiadavky sú vôbec povolené. Trieda HttpRequest automaticky spracováva predbežné požiadavky OPTIONS. Na to už nemusíte písať kód na strane klienta.

Server prijme predbežnú požiadavku OPTIONS skôr, ako prijme hlavnú požiadavku. Tu je kód aplikácie slambookserver, ktorý spracováva požiadavky OPTIONS.

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

Tento kód robí nasledovné:

    Získa objekt HttpResponse, ktorý sa stará o to, aby server odoslal odpoveď klientovi

    Pridáva hlavičky CORS pre riadenie prístupu

    Vytlačí správu do konzoly

    Označuje, že odpoveď nemá žiadny obsah

    Ukončí odpoveď, ktorá bude odoslaná klientovi.

Keď klient dostane požiadavku, hlavička CORS signalizuje, že požiadavky POST budú prijaté.

Prispôsobenie hlavičiek CORS

Serverová aplikácia používa nasledujúcu funkciu na pridanie hlavičiek CORS pre požiadavky OPTIONS a POST do odpovede CORS. Funkcia pridá do odpovede servera tri hlavičky Riadenie prístupu(ktoré sú zahrnuté v HttpResponse).

Void addCorsHeaders(HttpResponse res) ( res.headers.add("Access-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); )

Prvé dva riadky hlavičky CORS umožňujú požiadavky POST a OPTIONS z akéhokoľvek pôvodu. Tretí definuje typ požiadaviek POST a OPTIONS, ktoré server umožňuje prijímať požiadavky len s určitými hlavičkami.

Spracovanie žiadostí POST

Tu je funkcia, ktorá spracováva požiadavky klienta POST.

Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((Zoznam) buffer) ( // Vrátenie údajov späť klientovi. res. write("Ďakujem za údaje. Počul som, že hovoríte: "); res. write(new String. fromCharCodes(buffer)); res. close (); ), onError: printError); )

Rovnako ako požiadavka OPTIONS, slambookserver prevezme objekt odpovede HTTP z požiadavky, vytlačí správu do konzoly a do odpovede pridá hlavičky CORS.

Ďalej tento kód počúva údaje z požiadavky klienta POST. Ak všetky dáta sú pripravené, zavolá sa funkcia spätného volania. Táto funkcia je napísaná na rovnakom mieste. Argument funkcie je zoznam čísel vrátane všetkých údajov. Každé číslo je reprezentované kódom, ktorý môže byť reprezentovaný ako znak UTF-16. Ale nemusíte sa toho obávať, pretože metódu môžete len zavolať String.fromCharCodes previesť na bežný reťazec.

Objekt HttpResponse spravuje toky údajov, ktoré môže server použiť na odoslanie údajov späť klientovi. V rámci funkcie spätného volania zapisuje slambookserver správy a nespracované údaje do tohto prúdu ako reťazec. Sofistikovanejšie servery s týmito údajmi niečo urobia, napríklad ich uložia na server, spracujú alebo možno aj vyberú peniaze z vášho bankového účtu.

Keď je prúd zatvorený, objekt HttpResponse odošle údaje klientovi.

Vzorová aplikácia slambook klient/server môže slúžiť ako východiskový bod pre vašu vlastnú aplikáciu klient/server, alebo ako príklad vytvárania vlastných aplikácií.

Tu je príklad toho, čo by mala urobiť klientska strana.

    Použite formuláre na zhromažďovanie údajov používateľov.

    Do formulárov vložte vstupné polia pre jednotlivé dátové prvky.

    Na spätnú väzbu použite Polymer, aby boli údaje formulára synchronizované s kódom Dart.

    Odoslať údaje priamo (akcia a metóda vlastností formulára)

    Alebo programovo (prepíše predvolené správanie tlačidla na odoslanie Dart kódu)

    Vytvorte objekt odpovede na serveri z objektu HttpRequest.

Tu je to, čo by mal server urobiť.

    Použite HttpServer na nastavenie servera a počúvanie na porte.

    Spracovať odpovede.

    Na povolenie každej požiadavky použite hlavičky CORS.

    Odpoveď na požiadavku používa HttpResponse.

    Spracúvajte dáta asynchrónne pomocou futures.

Na zapisovanie údajov do odpovede použite prúdy.

Tieto zdroje sú väčšinou založené na knižniciach Dart, ktoré poskytujú podporu pre písanie klientov a serverov. Všimnite si, že existujú dve triedy HttpRequest: jedna in šípka:html(pre klientov) a druhý šípka:io(pre servery).

Tvoje meno: Vaša adresa: Predložiť:
ZdrojKnižnicaPopis
HttpRequest šípka:html HTTP požiadavka na strane klienta
HttpRequest šípka:io Serverová strana požiadavky HTTP
HTTPServer šípka:io Časť servera, ktorá spravuje HTTP komunikáciu so serverom
HttpResponse šípka:io Backend, ktorý sa stará o odosielanie odpovedí na požiadavku
Prúdy šípka:async Dátový tok
Budúcnosť šípka:async Spôsob, ako získať údaje asynchrónne
JSON šípka:previesť Predvolená deklarácia konverzie JSON
Polymér Polymér Údaje vlastných prvkov priradené k šablóne

Obojsmerná dátová väzba pomocou polyméru

Príklad slambooku používa Polymér na spätnú väzbu hodnoty vstupného prvku s premennými Dart. Ak používateľ zmení hodnotu vstupného prvku, viazaná premenná v kóde Dart sa automaticky zmení. Alebo ak sa hodnota zmení v kóde Dart, priradený objekt vlastného prvku sa aktualizuje automaticky. Viac podrobností o dátovej väzbe a polyméri nájdete v článku Definovanie vlastných prvkov.

Tento príklad tiež používa deklaráciu obsluhy udalosti na zachytenie a spracovanie funkcií pre vstupné prvky.

Na príklade slambooku môžete vidieť použitie obojsmernej dátovej väzby pre rôzne vstupné prvky vrátane nových prvkov HTML5. Táto tabuľka spája všetky obojsmerné atribúty, ktoré môžete použiť s polymérom:

Použitie atribútu hodnotu v ľubovoľnom vstupnom prvku

Atribút hodnotu funguje na akýchkoľvek vstupných prvkoch a viaže hodnotu na reťazec Dart. Tento príklad používa hodnotu pre panel, zadávanie textu, výber farby, dátum a rozsah.


(Všimnite si, že nejaký kód okolo, napr

Slovník v kóde Dart s názvom dáta obsahuje údaje formulára. Objektový kód slovníka je zvýraznený s @pozorovateľné a hovory toObservable() na viazanie.

Slovník obsahuje páry kľúč/hodnota pre každý vstupný prvok, kde kľúčom je reťazec. Hodnoty prvkov spojených s hodnotu sú struny. HTML odkazuje na prvky slovníka pomocou ich názvov (ID) v Dart. Napríklad hodnota výberu farby je spojená s theData['favoriteColor'].

Pomocou vybratého indexu v rozbaľovacej ponuke

Prvok