Beləliklə, Dostlar. Bu, HTML formalarının öyrənilməsi bölməsindəki sonuncu videodur.
Sonuncu video dərsdə məlumatların göndərilməsi üçün GET və POST üsulları arasındakı fərqlərə baxdıq. Biz HTML formasındakı məlumatları emal etmək üçün nəzərdə tutulmuş fayl yaratdıq. Və nəhayət formaların öyrənilməsini başa çatdırmaq üçün sadəcə formadan məlumat toplamaq və göndərməyi öyrənməliyik.
Bu videoda biz forma verilənlərinin işləyicisi haqqında danışacağıq ki, bu da forma sahələrindən məlumat toplamaq və sonra onu emal etmək üçün lazım olan şeydir. Bu videoda biz təkcə sahələrdən məlumat toplamaq deyil, həm də onları e-poçtla necə göndərməyi öyrənəcəyik. Məlumatların işlənməsi və buna bənzər heç bir xüsusi xüsusiyyət olmayacaq. Biz sadəcə olaraq məlumatların toplanması və göndərilməsi üçün ən sadə variantdan istifadə edəcəyik. Məlumatları işləyicidə göstərəcəyimiz E-poçta göndərəcəyik. Burada yadda saxlamağa dəyər ki, işləyici php formatında bir fayldır. HTML dilini öyrəndiyimiz üçün PHP haqqında çox qısa danışacağıq. Və yalnız məlumatların elektron poçtla göndərilməsinin konkret nümunəsini nəzərdən keçirin.
Forma işləyicisi.
Yuxarıda qeyd etdiyim kimi, bu, müxtəlif funksiyalardan, dəyişənlərdən və qlobal massivlərdən istifadə edərək, formadan məlumatları toplayıb poçt qutumuza göndərə biləcək PHP formatında bir fayldır. Forma işləyicisinin ən sadə və ən primitiv versiyasını nəzərdən keçirəcəyik. O, heç bir sahə yoxlaması və ya buna bənzər bir şey etməyəcək. Bu video dərsdə yoxlayacağımız yeganə şey, forma məlumatları olan məktubun elektron poçtumuza göndərilib-göndərilməməsi və ya bir şeyin səhv getməsidir.
E-poçt vasitəsilə məlumatların göndərilməsi.
Məlumat prosessoru kifayət qədər kiçik bir PHP kodudur və forma sahələrindən bütün məlumatları qəbul edəcək, onları emal edəcək və bizə e-poçt vasitəsilə göndərəcək.
Forma məlumatlarını e-poçta göndərmək üçün biz poçt funksiyasından istifadə edəcəyik. Funksiyadan istifadə edərək, bütün məlumatların göndərilməli olduğu e-poçtu, məktubun mövzusunu və formadan toplanmış məlumatlardan ibarət olan mesajın özünü təyin edə bilərik.
Sadə dillə desək. Bu video dərsdə. Biz veb-saytda rəy formasının necə yaradılmasına və onun işləməsinə baxacağıq. Ziyarətçi bizə nəsə yazmaq istəyəndə onun mesajını elektron poçtla alacağıq. Əslində hər şey olduqca sadədir. Bütün bunları veb saytınızda necə edəcəyinizi anlamaq üçün sadəcə HTML formalarını öyrənmək bölməsinə keçin və bu videoya baxın.
Video dərs: Forma işləyicisi. E-poçt vasitəsilə məlumatların göndərilməsi.
HTML kataloqu və digər materiallar endirilə bilər və yüklənməlidir!
Növbəti video dərslikdə HTML-də cədvəllərin yaradılması ilə bağlı yeni bölməyə başlayacağıq. Və biz öyrənəcəyik
Formadan istifadə edərək verilənlərin serverə ötürülməsini təşkil etmək üçün siz HTML formasını tətbiq etməlisiniz ki, ona sayt ziyarətçiləri öz məlumatlarını və PHP kodunu daxil etsinlər, bunun məqsədi serverdə qəbul edilmiş məlumatları qəbul etmək və emal etməkdir.
HTML məlumat təqdimetmə forması
Səhifədəki forma teqlərlə formalaşır
, hansının içərisində mətn məlumatını daxil etmək üçün sahələr üçün teqlər, xüsusi komponentlər üçün teqlər (məsələn, birləşdirilmiş qutu), seçim sahəsi və fayl yükləməsi üçün etiketlər yerləşdirilir.* HTML5 üçün forma sahəsi teqlərini forma teqlərinin içərisində deyil, səhifənin istənilən yerində yerləşdirmək də mümkündür. Bu halda, hər bir belə sahə üçün onun hansı təqdimetmə forması ilə qarşılıqlı əlaqədə olmasını müəyyən etmək üçün “forma” atributunu göstərməlisiniz.
Beləliklə, ən sadə təqdimat forması aşağıdakı kodu ehtiva edə bilər:
Forma elementləri və onların parametrləri:
action="myform.php"– “fəaliyyət” atributu hansı php faylının göndərilən məlumatları emal edəcəyini müəyyən edir. Bu nümunədə məlumatlar forma ilə səhifə ilə eyni kataloqda yerləşən "myform.php" faylına göndəriləcək. Bu atribut açıq şəkildə göstərilməyibsə, forma məlumatları formanın özünün səhifə ünvanına göndəriləcək.
metod = "yazı"– metod parametri POST və ya GET məlumat ötürmə metodunu müəyyən edir. Bu barədə ətraflı məlumatı "POST və GET üsulları arasındakı fərqlər" məqaləsində tapa bilərsiniz. Atributu açıq şəkildə göstərməsəniz, standart olaraq GET metodu istifadə olunacaq.
Mətn "Dəyər A:" Və "Dəyər B:" yalnız istifadəçi üçün formanın dizaynı və aydınlığı məqsədi ilə əlavə edilmişdir. Məlumat ötürmək üçün bunu əlavə etmək lazım deyil, istifadəçiyə nə daxil edəcəyini aydınlaşdırmaq üçün qeyd etməyə dəyər.
Teqlər müxtəlif forma nəzarət elementləri yaratmaq üçün istifadə olunur.
type="mətn"– “növ” atributu sahənin növünü müəyyən edir. Hansı növün göstərilməsindən asılı olaraq elementin həm görünüşü, həm də məqsədi dəyişir. "Mətn" atributunun dəyəri elementin brauzerdə istifadəçinin öz sətirini daxil edə biləcəyi bir sətirli mətn sahəsi kimi göstəriləcəyini göstərir.
ad = "məlumat1"– “ad” atributu server tərəfindən qəbul edilən massivdəki verilənlərin adını, daha doğrusu indeksini göstərir. Bu, PHP işləyicisinin ötürülən dəyərə daxil ola biləcəyi tələb olunan parametrdir. Ad özbaşına seçilə bilər, lakin bu dəyər müəyyən mənada aydın olduqda daha rahatdır.
yazın = "göndər"- etiket bu qiymətlə "tip" parametri səhifədə düymə kimi görünəcək. Əslində, formada bir düymə olmadan edə bilərsiniz. Məsələn, formada mətn sahələri varsa, onda təqdimetmə sadəcə klaviaturada "Enter" düyməsini sıxmaqla həyata keçirilə bilər. Amma düymənin olması formanı daha başa düşülən edir.
dəyər="Göndər" !}– bu halda (type="submit" üçün) yalnız düymənin üzərindəki etiketi müəyyən edir. type="text" üçün, məsələn, bu mətn sahəsində göstəriləcək mətn olacaq.
Nəticədə, səhifədə bu kod belə görünəcək:
Düyməni klikləməklə, məlumatlar göstərilən səhifəyə göndəriləcək və əgər varsa və düzgün işləyirsə, məlumatlar emal ediləcək.
PHP-də HTML forması ilə göndərilən məlumatların işlənməsi
Təsvir edilən şəkildə göndərilən məlumatlar $_POST, $_GET və $_REQUEST superqlobal massivlərində yerləşdirilir. $_POST və ya $_GET göndərmək üçün istifadə olunan metoddan asılı olaraq məlumatları ehtiva edir. $_REQUEST müəyyən edilmiş metodlardan hər hansı biri ilə göndərilən məlumatları ehtiva edir.
$_POST, $_GET və $_REQUEST indeks sahələri teqlərin "ad" atributları ilə üst-üstə düşən assosiativ massivlərdir. . Müvafiq olaraq, myform.php faylında verilənlərlə işləmək üçün sahə adını indeks olaraq göstərərək belə massivin elementlərinin qiymətlərini dəyişənlərə təyin edə bilərsiniz:
// GET metodu üçün
$a = $_GET[ "data1" ];
$b = $_GET[ "data2" ];
// POST metodu üçün
$a = $_POST[ "data1" ];
$b = $_POST[ "data2" ];
// istənilən üsul üçün
$a = $_REQUEST[ "data1" ];
$b = $_REQUEST[ "data2" ];
Forma sahələrinin doldurulmasının yoxlanılması
Bəzən məlumatları qəbul edərkən istifadəçinin boş forma təqdim edib-etmədiyini yoxlamaq lazımdır. Bunun üçün boş funksiyadan istifadə edə bilərsiniz.
əgər (boş ($_REQUEST["data1" ])) (
əks-səda "Sahə doldurulmayıb";
} başqa(
əks-səda "Sahə dolduruldu";
$a = $_REQUEST[ "data1" ];
}
Adətən bu həll kifayətdir. Mətn daxil etmək lazımdırsa, onun daxil edilib-edilməməsi aydın olacaq. Bununla belə, istifadəçi hesablama məqsədləri üçün qəsdən sıfıra daxil olarsa, boş funksiya heç bir dəyərin olmadığını göstərəcəkdir. Buna görə də, belə hallar üçün isset funksiyasından istifadə etmək daha yaxşıdır. Dəyərin verilib-verilmədiyini açıq şəkildə yoxlayacaq.
əgər (isset ($_REQUEST["data1" ])) (
əks-səda "Sahə dolduruldu";
$a = $_REQUEST[ "data1" ];
} başqa(
əks-səda "Sahə doldurulmayıb";
}
Laboratoriya işi 1. HTTP protokolu. Metodlar GET, POST. HTML formaları.
Nəzəri hissə
HTTP Sorğunun Həyat Dövrü
- Brauzer əlaqəni açır server ilə
- Brauzer səhifəni qəbul etmək üçün serverə sorğu göndərir
- Server brauzerə cavab (ən çox HTML kodu) yaradır və əlaqəni bağlayır
- Brauzer HTML kodunu emal edir və səhifəni göstərir
Vurğulananlara diqqət yetirin qalın. İstədiyiniz səhifəni ekranda görməzdən əvvəl serverlə əlaqə bağlanıb və o, sizi unudub. Fərqli (və ya eyni) ünvan daxil etdikdə və ya linkə kliklədikdə və ya HTML forması düyməsini kliklədikdə eyni nümunə yenidən təkrarlanacaq.
Bu iş növü adlanır "müştəri-server". Bu vəziyyətdə müştəri brauzerdir.
Beləliklə, veb serverə qoşulma cəmi bir neçə saniyə (yaxud saniyələrin fraksiyaları) davam edir - bu, linkə (və ya digər sorğu növünə) klikləməklə səhifənin göstərilməyə başlaması arasındakı müddətdir. Əksər brauzerlər əlaqə zamanı bir növ göstərici göstərir, məsələn, MS Internet Explorer yuxarı sağ küncdə animasiya göstərir.
HTTP-nin “qara qutu” kimi qavranılmasından əbədi olaraq xilas olmaq üçün gəlin telnetdən istifadə edən brauzer kimi “iddia edək”:
- başlayaq telnet ya.ru 80
- Terminal pəncərəsinə aşağıdakıları daxil edək (əgər giriş göstərilmirsə, eybi yoxdur):
GET / HTTP/1.0[burada Enter düyməsini basın]
Aparıcı: ya.ru[burada iki dəfə Enter düyməsini basın]
Enter düyməsini sıxmaq adətən kimi işarələnən CR + LF simvollarının birləşməsinə uyğun gəlir \r\n. Bu qeyd aşağıda istifadə olunacaq.
http://ya.ru/ səhifəsinin HTML kodu ekran boyu işləyəcək. Gördüyünüz kimi, mürəkkəb bir şey yoxdur.
Cari səhifənin mənbə koduna menyudan “Görünüş|Mənbə” seçimi ilə demək olar ki, istənilən brauzerdə baxmaq olar.
Şəkillər, çərçivələr - bütün bunlar əlavə istəklərdir, tamamilə eynidir. Əslində, şəkillər brauzer pəncərəsində haradan gəlir: HTML kodunu təhlil edərkən (emal edərkən) brauzer https://i0.wp.com/ teqinə rast gəlir. 
.
Sınayın:
Telnet www.google.ru 80
GET /php/php5ru.png HTTP/1.0\r\n
Aparıcı: ya.ru\r\n\r\n
Bu png faylına mətn redaktorunda baxsanız, görəcəyiniz şey ekranda yanıb-sönəcək.
I-2. HTML formaları. Məlumatların serverə göndərilməsi üsulları
Yəqin ki, artıq HTML formaları ilə qarşılaşmısınız:
- Adınızı daxil edin:
Bu kodu HTML faylında saxlamaq və sevimli brauzerinizdən istifadə etməklə ona baxmaqla siz tanış HTML formasını görəcəksiniz:
Adınızı daxil edin:
Gəlin bu qısa nümunədə istifadə olunan etiketlərə daha yaxından nəzər salaq.
Tag , qoşalaşmış son etiketi olan, əslində formanı təyin edir. Onun atributları isteğe bağlıdır:
- hərəkət- URL-i (tam və ya nisbi) müəyyən edir göndərildi forma. Formanın göndərilməsi bütün digərləri kimi serverə eyni sorğudur (yuxarıda təsvir etdiyim kimi).
Bu atribut göstərilməyibsə, əksər brauzerlər (daha doğrusu, mənə məlum olan bütün brauzerlər) formanı cari sənədə, yəni “özünə” göndərirlər. Bu, rahat stenoqrafiyadır, lakin HTML standartına görə, fəaliyyət atributu tələb olunur.
- üsul - yol formanı təqdim edir. Onlardan ikisi var.
- GET- ünvan çubuğunda forma məlumatlarının göndərilməsi.
Müxtəlif vebsaytlarda URL-in sonunda “?” işarəsinin olduğunu görmüsünüz. və aşağıdakı məlumatlar formatda parametr = dəyər. Burada "parametr" uyğun gəlir məna atribut ad forma elementləri (teq haqqında aşağıya baxın ), və "dəyər" - atributun məzmunu dəyər(məsələn, eyni etiketin mətn sahəsinə istifadəçi daxiletməsini ehtiva edir ).
Məsələn, Yandex-də bir şey axtarmağa çalışın və brauzerin ünvan çubuğuna diqqət yetirin. Bu GET üsuludur. - POST- forma məlumatları göndərilir sorğu orqanı. Bunun nə olduğu tam aydın deyilsə (və ya tamamilə aydın deyilsə), narahat olmayın, tezliklə bu məsələyə qayıdacağıq.
Əgər atribut üsul göstərilməyib - "GET" nəzərdə tutulur.
Tag - dəstlər forma elementi, atributla müəyyən edilir növü :
- Mənası "mətn" tək sətirli mətn daxiletmə sahəsini təyin edir
- Mənası "təqdim et" basıldığında səbəb olan düyməni təyin edir göndərilməsi formaları serverə göndərir
Digər dəyərlər mümkündür (və - forma elementini təyin edən yeganə teq deyil), lakin biz onlara növbəti fəsillərdə baxacağıq.
Beləliklə, "OK" düyməsini kliklədikdə nə baş verir?
- Brauzer forma daxil olan elementlərə baxır və onlardan ad və dəyər atributlarını formalaşdırır forma məlumatları. Deyək ki, ad daxil edilib Vasya. Bu halda, forma məlumatlarıdır ad=Vasya&okbutton=OK
- Brauzer serverlə əlaqə qurur, atributda göstərilən sənəd üçün serverə sorğu göndərir hərəkət etiket
- Server alınan sorğunu təhlil edir, cavab yaradır, onu brauzerə göndərir və əlaqəni bağlayır
- Brauzer serverdən alınan sənədi göstərir
Eyni sorğunun əl ilə göndərilməsi (telnet istifadə edərək) belə görünür (saytın domen adının www.example.com olduğunu fərz etsək):
telnet www.example.com 80
GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
Ev sahibi: www.example.com\r\n
\r\n
Yəqin ki, artıq təxmin etdiyiniz kimi, "GET" göndərmə metodu olan formada təqdim düyməsini klikləməklə, brauzerin ünvan çubuğuna müvafiq URL (sonunda sual işarəsi və forma məlumatları ilə) yazmaq eynidir: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
Əslində, GET metodu sadəcə URL-ni daxil etməklə və ya keçidə klikləməklə serverdən sənəd tələb etdikdə istifadə olunur. İstifadə edərkən
Fəaliyyət və metod atributlarından istifadə.
Və burada formaya üç giriş elementi əlavə edən HTML kodu - mətn sahəsi, göndərmə düyməsi və qeyd qutusu.
Qeyd qutusu etiket etiketinə bükülmüşdür, ona görə də dəyəri dəyişmək üçün həm qeyd xanasının özünə, həm də başlığa klikləyə bilərsiniz.
Bu HTML kodu bəzi avtomatik davranış təmin edir.
****
Kliklədikdə forma məlumatlarının təqdim edilməsinə səbəb olan xüsusi düymə yaradır. Fəaliyyət və metod atributlarına əsasən, düymə sorğu yaradır və onu göstərilən URL-də serverə göndərir.
**name=q** **name="sayt axtarışı"**
mətn sahəsinin adını və qeyd qutusunun adını müəyyən edir.
Forma daxilində müəyyən adı olan elementlər üçün onlar həmin forma üçün məlumat verirlər. Bu nümunədə mətn sahəsi tərəfindən verilən dəyər üçün dəyərdir q, və qeyd qutusu dəyəri təmin edir sayt axtarışı, bu parametrlərin hər ikisi etibarlı Google sorğu URL-nin bir hissəsidir. İstifadəçi düyməni kliklədikdə, ad və müvafiq dəyər axtarış URL-inə əlavə olunur. Budur nümunə sorğu:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Bu nümunə heç bir Dart və ya Javascript kodu olmadan tamamilə yaradılmışdır. Çox sadə olduğu üçün o, HTML-nin normal davranışından istifadə edə bilər: ictimaiyyətə açıq və asan formalaşdırılan URL-lər, həmçinin adi GET sorğusu. Böyük miqdarda məlumat ehtiva edən formalar və ya ixtisaslaşmış serverlə əlaqə quran veb proqramlar üçün adətən formanı proqramlı şəkildə emal etməlisiniz.
Aşağıdakı nümunə POST sorğusundan istifadə edərək məlumatları proqramlı şəkildə serverə təqdim edən daha mürəkkəb formanı göstərir.
Xüsusilə slambook nümunəsi
Bu bölmə əsas nümunələr kimi iki proqramı ehtiva edir.
Birincisi, yerli kompüterdə 4040 portunu dinləyən və mesajlar yaratmaq və müştəriyə təsdiq göndərməklə POST və OPTIONS sorğularını emal edən slambookserver adlı adi server proqramıdır. Tətbiqə digər serverlərdən göndərilən sorğulardan istifadə etməyə icazə vermək üçün server CORS başlıqlarından istifadə edir.
İkincisi, istifadəçinin məlumat daxil edə biləcəyi forma təqdim edən slambook adlı müştəri proqramıdır. Bu proqram giriş elementləri və Dart dəyişənləri arasında ikiqat məlumat bağlaması üçün Polimerdən istifadə edir. İstifadəçi düyməni kliklədikdə, Dart kodu verilənləri JSON sətirinə çevirir, serverin icazəsini almaq üçün OPTIONS sorğusu göndərir və sonra məlumatları göndərmək üçün POST sorğusu göndərir. Serverdən sorğu alındıqda o, müştəriyə göstərilir.
Aşağıdakı diaqram bu nümunədə server və müştəri arasında əlaqə ardıcıllığını göstərir.
Sınayın!İstənilən məlumatları daxil edin və düyməni basın Göndər.
Versiya Qeyd. Slambook tətbiqi polymer.dart 0.9 ilə uyğun gəlir.
Sorğu “Server yoxdur” mesajını qaytarır, çünki siz maşınınızdakı serveri işə salmamısınız. Gəlin bunu düzəldək.
Server işə salınır
Slambookserver.dart əsas server proqramının mənbə kodu dərslik nümunələrindən endirilə bilər.
Komanda xəttindən server proqramını işə salın
% dart slambookserver.dart http://127.0.0.1:4040-da GET və POST üçün dinləmə
İndi yuxarıdakı slambook proqramından məlumatları göndərməyə yenidən cəhd edə bilərsiniz.
Şərh: Əgər başqa proqram artıq 4040 portundan istifadə edirsə, server xəta mesajı qaytaracaq və icranı dayandıracaq. Bu səhifədəki proqram slambookserver-in yerli maşında, port 4040-da yerləşməsini gözləyir. Buna görə də, proqramın işləməsi üçün başqa bir prosesi öldürməli və slambookserver-i yenidən işə salmalısınız. Və ya server və müştəri proqramında port nömrəsini dəyişə bilərsiniz. Dart Redaktoru istifadə etdiyi üçün 3030-dan istifadə etməkdən çəkinin. Sonra yerli kompüterinizdə müştəri və serveri işə salın.
Bu təlimatın qalan hissəsi server və müştəri kodunu izah edir.
Müştəri tərəfi haqqında öyrənəcəksiniz:
Forma məlumatlarının göndərilməsi
Formanı sıfırlayın
Forma məlumatlarını bağlamaq üçün Polimerdən istifadə
Bu bölmənin server hissəsi haqqında danışacaq:
CORS başlıqları
OPTIONS sorğuları işlənir
POST sorğularının idarə edilməsi
Forma məlumatlarının təqdim edilməsi
Əvvəlcə verilənlərin serverə necə göndərilməsinə nəzər salaq.
Xatırladaq ki, search_form nümunəsi formanı təqdim etmək üçün məqsəd və metodu müəyyən etmək üçün fəaliyyət və metod atributlarının istifadəsinə əsaslanırdı. Həmçinin unutmayın ki, search_form nümunəsi xüsusi göndərmə düyməsinin avtomatik davranışına əsaslanır. Digər tərəfdən, slambook nümunəsi təqdimetmə prosesində birbaşa iştirak edir:
Birincisi, formada nə fəaliyyət, nə də üsul müəyyən edilmir
İkincisi, təqdim düyməsinin Dart-da klik idarəedicisi var
Üçüncüsü, klik işləyicisi göndərmə düyməsinin avtomatik davranışını ləğv edir
Nəhayət, forma məlumatları Dart kitabxanalarından istifadə edərək serverə göndərilir
Slambook nümunəsindəki forma xüsusi elementlə təmsil olunur tute-slambook-forma, aşağıdakı HTML kodu ilə təmsil olunur:
Fəaliyyət və metod atributlarının olmamasına diqqət yetirin. Bunun əvəzinə, göndərmə düyməsinin davranışı Dartın düyməni basma idarəedicisində müəyyən edilir. Aşağıda təqdim düyməsini yaradan və onu Dart işləyicisinə bağlayan HTML kodu var.
Və submitForm() düyməsinə klik işləyicisi üçün kodun özü:
İşləyici kodunun hər bir elementinə nəzər salaq
Standart işləyicini ləğv edin
Bu, atributları olmayan bir hadisədir hərəkət Və üsul, təqdim düyməsi slambook nümunəsində lazım olmayan avtomatik davranışı ehtiva edir. Beləliklə, işləyici kodunun birinci sətri düymənin standart davranışını ləğv etmək üçün e.preventDefault() funksiyasını çağırır.
Göndərmə Formunu ləğv edin (Event e) ( e.preventDefault(); // Defolt göndərməni etməyin. … )
POST sorğusunun qurulması və göndərilməsi
Növbəti kod parçası obyekt yaradır HttpRequest. Bu kod POST sorğusunu qurmaq və göndərmək üçün istifadə edilən HttpRequest obyektini yaratmaq üçün new istifadə edir. HttpRequest sinfində müvafiq getString() funksiyası var ki, siz URL-lərə müntəzəm GET sorğularından istifadə edə və göndərəsiniz.
Növbəti sətir HttpRequest obyektini çağırılan geri çağırış funksiyası ilə təmin edir onData, serverdən cavab alındıqda çağırılır. OnData() funksiyası bəyannaməsinin təfərrüatlarına daha sonra baxacağıq.
Əhəmiyyətli: Sorğunu göndərməzdən əvvəl geri çağırış funksiyasını qeydiyyatdan keçirməlisiniz!
Sorğu = yeni HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());
Nəhayət, funksiya forma məlumatlarını JSON sətri kimi serverə göndərir. Bəzən məlumatlar hissələrə bölünür. Lakin bu nümunə məlumatların bir anda göndərilməsi üçün kifayət qədər kiçikdir. Bu sorğu asinxrondur, ona görə də send() metodu sorğu göndərilən kimi tamamlanacaq.
Serverdən cavab gözlənilir
HttpRequest obyekti serverlə əlaqə saxlayır. Sahədən istifadə edərək dövlət ala bilərsiniz hazır vəziyyət HttpRequest obyekti. Hazır vəziyyət beş fərqli dəyər qəbul edə bilər: göndərilməmiş, açıq, başlıqlar alındı, yükləndi və tamamlandı. Hazır vəziyyət dəyişdikdə, HttpRequest hadisə yaradır və onData() geri çağırış funksiyası çağırılır.
Hadisə idarəedicisinin qeydiyyatdan keçdiyi kod xəttini xatırlayaq onReadyStateChange:
Request.onReadyStateChange.listen(onData);
Listen() metodu üçün tələb olunan yeganə arqument imza ilə geri çağırış funksiyasıdır: void onData(T). Listen() metodu həmçinin üç əlavə arqument müəyyən etməyə imkan verir, məsələn, səhv idarəedicisi.
Aşağıda onData() geri çağırış funksiyası var:
Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Data yadda saxlanıldı OK. serverResponse = "Server Sez: " + request.responseText; ) əgər (request.readyState) == HttpRequest.DONE && request.status == 0) ( // Status 0-dır...çox güman ki, server işləmir. serverResponse = "Server yoxdur"; ) )
Kodun göstərdiyi ilk şey sorğunun uğurla başa çatıb-çatmamasıdır. Əgər belədirsə, cavabın məzmunu adlanan sətirdə yerləşdirilir serverResponse, bu, slambook tətbiqinin mətn sahəsi elementinin dəyərinə bağlıdır. Xətt dəyişdirildikdə istifadəçi interfeysi avtomatik olaraq yenilənəcək və istifadəçiyə mesaj göstəriləcək.
Sorğu xəta ilə yerinə yetirilərsə, proqram çıxış edəcək serverResponse istifadəçiyə göstəriləcək səhv mesajı.
Forma məlumatlarının sıfırlanması
Sıfırlama düyməsi, standart olaraq, həmin formaya daxil edilmiş dəyərləri təmizləyən xüsusi HTML daxiletmə elementidir. Bunun əvəzinə, düymənin forma dəyərlərini orijinal dəyərlərinə sıfırlamasını istəyirik. Buna görə də, sıfırlama düyməsi üçün klik işləyicisi avtomatik davranışı ləğv etməli və məlumatları açıq şəkildə doldurmalıdır.
Void resetForm(Event e) ( e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["raindrops"] = false; favoriteThings["mittens"] = false; favoriteThings["çaydanlar"] = false; theData ["firstName"] = ""; theData["favoriteQuote"] = ""; theData["favoriteColor"] = "#FFFFFF"] = "01-01-2013"; 0"; theData["catOrDog"] = "pişik"; theData["music"] = 0; theData["zombies"] = false; serverResponse = "Məlumatların sıfırlanması."; )
Backend yaratmaq və portda dinləmək
İndi isə adlanan server hissəsinə nəzər salaq slambookserver, o, slambook müştəri proqramından göndərilən sorğuya HTTP cavabını qaytarır. Server tərəfindəki kod [JSON Veb xidmətləri yaratmaq üçün Dartdan istifadə etmək (#) məqaləsinə əsaslanır.
Server yerli maşında 4040 portunu dinləyir və yalnız POST və OPTIONS kimi sorğuları emal edir. Hər iki sorğu növü daxil olmaq üçün CORS başlıqlarından istifadə edir. POST sorğuları üçün server sorğudan aldığı JSON məlumatlarını ehtiva edən qısa təsdiq mesajı qaytarır.
Gəlin koda nəzər salaq.
Slambookserver tətbiqinin main() funksiyası aşağıda tam şəkildə göstərilmişdir. HttpServer sinifindən istifadə edərək, slambookserver proqramı yuxarı səviyyəli funksiyanı çağırdıqdan sonra yerli maşının 4040 portunu dinləməyə başlayır. bağlamaq()
Yekun HOST = "127.0.0.1"; son PORT = 4040; void main() ( HttpServer.bind(HOST, PORT).sonra (gotMessage, onError: printError); )
bind() funksiyası gələcəkdə dəyər əldə etmək üçün istifadə edilə bilən gələcəyi qaytarır (bir dəqiqədən sonra əlavə məlumat gələcək). then() funksiyası gələcək kimi iki geri çağırış funksiyasını qeyd edir. Gələcək dəyərlər qəbul etdikdə ilk funksiya getMessage() çağırılır. İkinci çap xətası Bağlantı cəhdi uğursuz olduqda çağırılır. Məsələn, başqa bir proqram artıq eyni portda dinləyirsə, xəta baş verə bilər.
Hər növ funksiya sorğusunu idarə etmək üçün sorğuları süzün və qalan metodları çağırın varMessage() aşağıda.
Void gotMessage(_server) ( _server.listen((HttpRequest request) ( keçid (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( sorğu ) ), onError: printError // Dinləmək alınmadı ("GET və POST üçün http://$HOST:$PORT");
GET kimi digər sorğu növlərini idarə etmək üçün sadəcə olaraq daha çox dəyər əlavə edə bilərsiniz hal Məsələn 'GET' işi.
Fyuçers haqqında bir az.
POST və OPTIONS sorğularının işlənməsi koduna baxmadan əvvəl fyuçerslərə bir az nəzər salaq.
Gələcək gələcəkdə bir müddət dəyər əldə etməyin bir yolunu təmsil edir. Proqramın verilənləri gözləyərkən bloklanmasının qarşısını almaq üçün fyuçerslərdən istifadə edirsiniz, məsələn, dəyər təmin etmək üçün uzun hesablama tələb olunursa və ya dəyər I/O istifadə edərək oxunmalı və ya götürülməlidir.
Gələcəyi qaytaran funksiya çağırıldıqda iki şey baş verir
Funksiya icra üçün növbəyə qoyulur və dərhal natamam fyuçers obyektini qaytarır.
Daha sonra, dəyər alındıqda, fyuçers obyekti alınan dəyərlə və ya xəta ilə çıxır.
Gələcək tərəfindən qaytarılan dəyəri əldə etmək üçün metoddan istifadə edin sonra() geri zəngi qeyd etmək üçün.
Bu nümunədə həm müştəri, həm də server tərəfləri sorğu göndərmək və müvafiq cavabları almaq üçün fyuçersdən istifadə edirlər. Müştəri-server proqramları demək olar ki, həmişə kommunikasiya və digər asinxron I/O növləri üçün fyuçersdən istifadə edir.
OPTIONS sorğularının idarə edilməsi
Bir sinifdən istifadə HttpRequest, istifadəçi “göndər” düyməsini kliklədikdə slambook müştəri proqramı sorğular göndərir. Bu məqalənin əvvəlində kodu gördünüz.
Müştəri və server müxtəlif mənşəlidirsə, bu, tətbiqlərdə ümumidir, POST-dan əvvəl uçuşdan əvvəl sorğu göndərilir. İlkin sorğuda ilk növbədə hansı sorğulara icazə verildiyini müəyyən etmək üçün OPTIONS sorğusu olmalıdır. HttpRequest sinfi uçuşdan əvvəl OPTIONS sorğularını avtomatik idarə edir. Bunun üçün artıq müştəri tərəfi kodu yazmağa ehtiyac yoxdur.
Server əsas sorğunu almazdan əvvəl ilkin OPTIONS sorğusunu alır. Budur OPTIONS sorğularını emal edən slambookserver tətbiqi üçün kod.
Etibarsız tutacaq Seçimləri(HttpRequest tələbi) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. yaxın();
Bu kod aşağıdakıları edir:
Müştəriyə cavab göndərən serverin qayğısına qalan HttpResponse obyekti əldə edir
Giriş nəzarəti üçün CORS başlıqları əlavə edir
Konsola mesaj çap edir
Cavabın məzmunu olmadığını bildirir
Müştəriyə göndəriləcək cavabı tamamlayır.
Müştəri sorğu aldıqda, CORS başlığı POST sorğularının qəbul ediləcəyini bildirir.
CORS başlıqlarının qurulması
Server proqramı CORS cavabına OPTIONS və POST sorğuları üçün başlıqlar əlavə etmək üçün aşağıdakı funksiyadan istifadə edir. Funksiya server cavabına üç başlıq əlavə edir Giriş-nəzarət(HttpResponse-a daxil olan).
Ləğv edin addCorsHeaders(HttpResponse res) ( res.headers.add("Giriş-nəzarət-İcazə verin-Mənşə", "*, "); res.headers.add("Giriş-nəzarət-İcazə-Metodları", "POST, SEÇİMLƏR" res.headers.add("Giriş-Nəzarət-İcazə Ver-Başlıqlar", "Mənşə, X-Tələb olunan-İlə, Məzmun Tipi, Qəbul Edin");
CORS başlığının ilk iki sətri istənilən mənbədən POST və OPTIONS sorğularına icazə verir. Üçüncüsü, serverin sorğuları yalnız müəyyən başlıqlarla qəbul etməyə icazə verdiyi POST və OPTIONS sorğularının növünü müəyyən edir.
POST sorğuları işlənir
Budur müştəri POST sorğularını idarə edən funksiya.
Ləğv tutucuPost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method: $(req.uri.path)"); addCorsHeaders(res); req.listen((Siyahı)
OPTIONS sorğusu kimi, slambookserver sorğudan HTTP cavab obyektini alır, konsola mesaj çap edir və cavaba CORS başlıqlarını əlavə edir.
Sonra, bu kod müştərinin POST sorğusundan məlumatları dinləyir. Əgər Hamısı verilənlər hazırdır, geri çağırış funksiyası çağırılır. Bu funksiya eyni yerdə yazılmışdır. Funksiyanın arqumenti bütün məlumatları özündə cəmləşdirən nömrələrin siyahısıdır. Hər bir nömrə UTF-16 simvolu kimi təqdim edilə bilən kodla təmsil olunur. Ancaq bu barədə narahat olmaq lazım deyil, çünki sadəcə metodu çağıra bilərsiniz String.fromCharCodes müntəzəm simli çevirmək üçün.
HttpResponse obyekti serverin məlumatı müştəriyə geri göndərmək üçün istifadə edə biləcəyi məlumat axınlarını idarə edir. Geri çağırış funksiyasının daxilində slambookserver mesajları və mənbə məlumatlarını bu axına sətir kimi yazır. Daha mürəkkəb serverlər bu məlumatlarla bir şey edəcək, məsələn, onu serverdə saxlamaq, emal etmək və ya hətta bank hesabınızdan pul çıxarmaq kimi.
Axın bağlandıqda, HttpResponse obyekti məlumatı müştəriyə göndərir.
Slambook nümunəsi müştəri-server proqramı öz müştəri-server tətbiqiniz üçün başlanğıc nöqtəsi və ya öz proqramlarınızı necə quracağınıza dair nümunə kimi xidmət edə bilər.
Müştəri hissəsinin nə etməli olduğuna dair bir nümunə.
İstifadəçi məlumatlarını toplamaq üçün formalardan istifadə edin.
Fərdi məlumat elementləri üçün formalarınıza daxiletmə sahələrini yerləşdirin.
Forma məlumatlarını Dart kodu ilə sinxronlaşdırmaq üçün rəy üçün Polimerdən istifadə edin.
Məlumatları birbaşa göndərin (fəaliyyət və metod formasının xüsusiyyətləri)
Və ya proqramlı olaraq (Dart göndərmə düyməsi kodunun standart davranışını ləğv etməklə)
HttpRequest obyektindən serverdə cavab obyekti yaradın.
Bu, serverin etməli olduğu şeydir.
Serveri konfiqurasiya etmək və portu dinləmək üçün HttpServer-dən istifadə edin.
Cavabları emal edin.
Hər sorğuya icazə vermək üçün CORS başlıqlarından istifadə edin.
Sorğuya cavab HttpResponse istifadə edir.
Fyuçersdən istifadə edərək məlumatları asinxron şəkildə emal edin.
Cavaba məlumat yazmaq üçün axınlardan istifadə edin.
Bu resurslar əsasən müştərilərin və serverlərin yazılması üçün dəstək verən Dart kitabxanalarına əsaslanır. Nəzərə alın ki, iki HttpRequest sinfi var: biri dart:html(müştərilər üçün) və ikinci dart: io(serverlər üçün).
| Resurs | Kitabxana | Təsvir |
|---|---|---|
| HttpRequest | dart:html | HTTP sorğusunun müştəri tərəfi |
| HttpRequest | dart: io | HTTP sorğu server tərəfi |
| HttpServer | dart: io | Server hissəsi serverlə HTTP əlaqəsini emal edir |
| HttpResponse | dart: io | Sorğuya cavabların göndərilməsinin qayğısına qalan server hissəsi |
| Axınlar | dart: async | Məlumat axını |
| Gələcək | dart: async | Məlumatların asinxron qəbulu üsulu |
| JSON | dart:çevirmək | Defolt JSON Dönüşüm Bəyannaməsi |
| Polimer | Polimer | Şablonla əlaqəli fərdi elementlər datası |
Polimerdən istifadə edərək iki tərəfli məlumat bağlaması
Slambook nümunəsi geribildirim üçün Polimerdən istifadə edir, Dart dəyişənləri olan bir giriş elementinin dəyəri. İstifadəçi giriş elementinin dəyərini dəyişdirərsə, Dart kodundakı əlaqəli dəyişən avtomatik olaraq dəyişir. Və ya dəyər Dart kodunda dəyişirsə, əlaqəli fərdi element obyekti avtomatik olaraq yenilənir. Xüsusi elementlərin müəyyən edilməsi məqaləsi məlumatların bağlanması və Polimer haqqında daha ətraflı məlumat verəcəkdir.
Bu misal həmçinin giriş elementləri üçün funksiyaları kəsmək və emal etmək üçün hadisə idarəedicisi bəyannaməsindən istifadə edir.
Slambook nümunəsindən istifadə edərək, yeni HTML5 elementləri də daxil olmaqla, müxtəlif giriş elementləri üçün iki istiqamətli məlumat bağlamasının necə istifadə edildiyini görə bilərsiniz. Bu cədvəl Polymer ilə istifadə edə biləcəyiniz bütün iki istiqamətli atributları ümumiləşdirir:
Atribut İstifadəsi dəyər hər hansı bir giriş elementində
Atribut dəyər istənilən giriş elementləri üzərində işləyir və dəyəri Dart sətri ilə əlaqələndirir. Bu nümunə istifadə edir dəyər qeyd qutusu, mətn daxiletmə qutusu, rəng seçici, tarix seçici və diapazon seçici üçün.
(Qeyd edək ki, məsələn, ətrafdakı bəzi kodlar
Dart kodundakı lüğət adlanır data forma məlumatlarını ehtiva edir. Lüğət obyekt kodu istifadə edərək vurğulanır @müşahidə edilə bilər və zənglər müşahidə edilə bilən() bağlama üçün.
Lüğətdə hər bir giriş elementi üçün açar/dəyər cütləri var, burada açar sətirdir. ilə əlaqəli elementlərin dəyərləri dəyər simlərdir. HTML Dart-da adlarından (identifikatorlarından) istifadə edən lüğət elementlərinə aiddir. Məsələn, rəng seçici dəyəri ilə əlaqələndirilir data['favoriteColor'].
Açılan menyuda seçilmiş İndeksdən istifadə
Element
İstifadəsi yoxlanılıb onay qutularında
Atributdan istifadə edə bilərsiniz yoxlanılıb Ayrı bir onay qutusu olan dart boolean dəyişəni. Burada hər bir qeyd qutusu ayrıca Boolean dəyişəni ilə əlaqələndirilir.
Formanın özü adətən istifadəçidən məlumatı daha sonra onu serverə göndərmək üçün qəbul etmək üçün nəzərdə tutulub, burada forma verilənləri işləyici proqramı qəbul edir. Belə proqram PHP, Perl və s. kimi istənilən server tərəfi proqramlaşdırma dilində yazıla bilər. Proqramın ünvanı teqin fəaliyyət atributunda göstərilir.
Bu misalda ad atributu (giriş və şifrə) ilə göstərilən forma məlumatları /example/handler.php ünvanındakı fayla ötürüləcək. Fəaliyyət atributu göstərilməyibsə, köçürmə cari səhifənin ünvanına baş verir.
Serverə köçürmə iki fərqli üsulla baş verir: etiketdə metodu təyin etmək üçün GET və POST