Shakl yordamida serverga ma'lumotlarni uzatishni tashkil qilish uchun siz HTML formasini amalga oshirishingiz kerak bo'ladi, unda saytga tashrif buyuruvchilar o'z ma'lumotlarini va PHP kodini kiritadilar, uning maqsadi serverda qabul qilingan ma'lumotlarni qabul qilish va qayta ishlashdir.
Ma'lumotlarni yuborish uchun HTML shakli
Sahifadagi forma teglar orqali tuzilgan
, uning ichida kiritish maydonlarining teglari joylashtirilgan matnli ma'lumotlar, maxsus komponentlar uchun teglar (masalan, birlashtirilgan quti), tanlash maydoni uchun teglar va faylni yuklash.* HTML5 uchun forma maydon teglarini forma teglari ichida emas, balki sahifaning istalgan joyida joylashtirish ham mumkin. Shu bilan birga, har bir bunday maydon uchun qaysi topshirish shakli bilan o'zaro aloqada bo'lishi kerakligini aniqlash uchun "shakl" atributini ko'rsatishingiz kerak.
Shunday qilib, eng oddiy yuborish shakli quyidagi kodni o'z ichiga olishi mumkin:
Shakl elementlari va ularning parametrlari:
harakat = "myform.php"- "harakat" atributi qaysi PHP fayli yuborilgan ma'lumotlarni qayta ishlashini belgilaydi. Ushbu misolda ma'lumotlar formali sahifa bilan bir xil katalogda joylashgan "myform.php" fayliga yuboriladi. Agar siz ushbu atributni aniq ko'rsatmasangiz, shakl ma'lumotlari shaklning sahifa manziliga yuboriladi.
usul = "post"- usul parametri ma'lumotlarni uzatish POST yoki GET usulini belgilaydi. Bu haqda batafsil ma'lumot "POST va GET usullari o'rtasidagi farqlar" maqolasida. Agar siz atributni aniq ko'rsatmasangiz, sukut bo'yicha GET usuli qo'llaniladi.
Matn "A ma'nosi:" va "Qiymat B:" faqat foydalanuvchi uchun shaklning dizayni va ravshanligi uchun qo'shilgan. Ma'lumot uzatish uchun buni qo'shish shart emas, lekin foydalanuvchi nimani kiritish kerakligini tushunishi uchun uni belgilashga arziydi.
Teglar turli shakl boshqaruvlarini shakllantirish uchun ishlatiladi.
turi = "matn"- "turi" atributi maydon turini belgilaydi. Qaysi tur ko'rsatilganiga qarab, o'zgaradi va tashqi ko'rinish element va uning maqsadi. "Matn" atributining qiymati brauzer elementni foydalanuvchi o'z satrini kiritishi mumkin bo'lgan bir qatorli matn maydoni sifatida ko'rsatishini bildiradi.
nomi = "ma'lumotlar1"- "name" atributi server tomonidan qabul qilingan massivdagi ma'lumotlarning nomini, aniqrog'i indeksini bildiradi. Bu kerakli parametr bo'lib, uning yordamida o'tkazilgan qiymatga PHP ishlov beruvchisida kirish mumkin. Ism o'zboshimchalik bilan tanlanishi mumkin, ammo bu qiymat tushunarli ma'noga ega bo'lganda qulayroqdir.
turi = "yuborish"- teg parametrning ushbu qiymati bilan "turi" sahifada tugma sifatida ko'rsatiladi. Aslida, siz formadagi tugmasiz ham qilishingiz mumkin. Agar, masalan, formada matn maydonlari mavjud bo'lsa, u holda yuborish klaviaturadagi "Enter" tugmasini bosish orqali amalga oshirilishi mumkin. Lekin tugmaning mavjudligi shaklni yanada tushunarli qiladi.
qiymat = "(! LANG: Yuborish" !}- bu holda (turi uchun = "yuborish") faqat tugmachadagi sarlavhani belgilaydi. Type = "matn" uchun, masalan, bu matn maydonida ko'rsatiladigan matn bo'ladi.
Natijada, sahifada ushbu kod quyidagicha ko'rinadi:
Tugmani bosish orqali ma'lumotlar ko'rsatilgan sahifaga yuboriladi va agar u mavjud bo'lsa va to'g'ri ishlasa, ma'lumotlar qayta ishlanadi.
PHP da HTML formasi yuborilgan ma'lumotlarni qayta ishlash
Shu tarzda yuborilgan ma'lumotlar $ _POST, $ _GET va $ _REQUEST superglobal massivlariga joylashtiriladi. $ _POST yoki $ _GET yuborish uchun qaysi usul ishlatilganiga qarab ma'lumotlarni o'z ichiga oladi. $ _REQUEST ko'rsatilgan usullardan har qandayida taqdim etilgan ma'lumotlarni o'z ichiga oladi.
$ _POST, $ _GET va $ _REQUEST - assotsiativ massivlar bo'lib, indeks maydonlari teglarning "ism" atributlariga mos keladi. ... Shunga ko'ra, myform.php faylidagi ma'lumotlar bilan ishlash uchun siz maydon nomini indeks sifatida ko'rsatib, bunday massiv elementlarining qiymatlariga o'zgaruvchilarni belgilashingiz mumkin:
// GET usuli uchun
$ a = $ _GET [ "ma'lumotlar1"];
$ b = $ _GET [ "ma'lumotlar2"];
// POST usuli uchun
$ a = $ _POST [ "ma'lumotlar1"];
$ b = $ _POST [ "ma'lumotlar2"];
// har qanday usul uchun
$ a = $ _SO'ROQ [ "ma'lumotlar1"];
$ b = $ _SO'ROQ [ "ma'lumotlar2"];
Shakl maydonlarining to'ldirilganligini tekshirish
Ba'zan, ma'lumotlarni qabul qilishda, foydalanuvchi bo'sh shaklni topshirganligini tekshirishingiz kerak. Buning uchun bo'sh funksiyadan foydalanishingiz mumkin.
agar (bo'sh ($ _REQUEST ["data1"])) (
aks-sado "Maydon to'ldirilmagan";
} boshqa (
aks-sado "Maydon to'ldirildi";
$ a = $ _SO'ROQ [ "ma'lumotlar1"];
}
Odatda bu yechim etarli. Agar siz matn kiritishingiz kerak bo'lsa, u kiritilgan yoki kiritilmaganligi aniq bo'ladi. Biroq, agar foydalanuvchi hisob-kitoblar uchun ataylab nolga kirsa, u holda bo'sh funksiya hech qanday qiymat yo'qligini ko'rsatadi. Shuning uchun bunday holatlar uchun isset funksiyasidan foydalangan ma'qul. Bu qiymat berilgan yoki berilmaganligini aniq tekshiradi.
agar (o'rnatilgan ($ _REQUEST ["ma'lumotlar1"])) (
aks-sado "Maydon to'ldirildi";
$ a = $ _SO'ROQ [ "ma'lumotlar1"];
} boshqa (
aks-sado "Maydon to'ldirilmagan";
}
HTML shakllari. $ _POST va $ _GET massivlari
HTML shakllari. Serverga ma'lumotlarni yuborish usullari
Siz avval HTML shakllarini ko'rgan bo'lsangiz kerak:
Saqlash berilgan kod HTML faylida va uni sevimli brauzeringizda ko'rsangiz, tanish HTML shaklini ko'rasiz:
teg
, aslida, shaklni o'rnatadi. Uning atributlari ikkalasi ham ixtiyoriy:- harakat - shakl yuboriladigan URL manzilini (to'liq yoki nisbiy) belgilaydi. Agar siz ushbu atributni ko'rsatmasangiz, ko'pchilik brauzerlar (aniqrog'i, men biladigan barcha brauzerlar) shaklni joriy hujjatga, ya'ni o'ziga yuboradi. Bu qulay stenografiya, lekin harakat atributi HTML standarti tomonidan talab qilinadi.
- usul - shakl qanday topshirilganligi. Ulardan ikkitasi bor.
- GET - manzil satrida shakl ma'lumotlarini yuborish.
Turli saytlarda URL oxirida “?” belgisi mavjudligini sezgan bo'lishingiz mumkin. keyin format parametridagi ma'lumotlar = qiymat. Bu erda "parametr" shakl elementlarining nom atributining qiymatiga mos keladi (teg haqida quyida ko'ring. ) va "qiymat" - qiymat atributining mazmuni (masalan, u xuddi shu tegning matn maydoniga foydalanuvchi kiritishini o'z ichiga oladi. ).
Misol uchun - Yandex-da biror narsa qidirishga harakat qiling va brauzerning manzil satriga e'tibor bering. Bu GET usuli. - POST - Shakl ma'lumotlari so'rovning asosiy qismida yuboriladi. Agar bu nima ekanligi to'liq aniq bo'lmasa (yoki umuman tushunarsiz) - tashvishlanmang, biz bu savolga tez orada qaytamiz.
- GET - manzil satrida shakl ma'lumotlarini yuborish.
teg - type atributi bilan aniqlangan shakl elementini belgilaydi:
- "Matn" qiymati bitta satr matn kiritish maydonini bildiradi
- "Yuborish" qiymati bosilganda formani serverga yuboradigan tugmani bildiradi
Boshqa qiymatlar ham mumkin (va forma elementini belgilaydigan yagona teg emas).
Xo'sh, OK tugmasini bosganimizda nima bo'ladi?
- Brauzer shakldagi elementlarni skanerlaydi va ularning nomi va qiymat atributlaridan shakl ma'lumotlarini hosil qiladi. Aytaylik, Vasya nomi kiritilgan. Bunday holda, shakl ma'lumotlari nomi = Vasya & okbutton = OK
- Brauzer serverga ulanishni o'rnatadi, serverga tegning harakat atributida ko'rsatilgan hujjat uchun so'rov yuboradi
- Server qabul qilingan so'rovni tahlil qiladi, javob hosil qiladi, uni brauzerga yuboradi va ulanishni yopadi
- Brauzer serverdan olingan hujjatni ko'rsatadi
Xuddi shu so'rovni qo'lda yuborish (telnet yordamida) shunday ko'rinadi (deylik Domen nomi sayt - www.example.com):
Telnet www.example.com 80 GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP / 1.0 \ r \ n Xost: www.example.com \ r \ n \ r \ n
Siz allaqachon taxmin qilganingizdek, “GET” yuborish usuli bilan shakldagi yuborish tugmasini bosish brauzerning manzil satriga tegishli URL manzilini (oxirida savol belgisi va shakl maʼlumotlari bilan) kiritishga oʻxshaydi:
Http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
Aslida, GET usuli serverdan hujjat so'raganda, uning URL manzilini kiritish yoki havolani bosish orqali qo'llaniladi. Foydalanish
8-12 qatorlarda ko'rsatilgan shakl ikkita elementni o'z ichiga oladi: nom va ok tugmasi. Metod atributi POST formasini yuborish usulini belgilaydi, forma yuborilgan URL manzilini ko'rsatuvchi harakat atributi esa PHP_SELF server o'zgaruvchisining qiymati bilan to'ldiriladi - ayni paytda bajarilayotgan skript manzili.
- uchun qisqartirilgan belgi .
Aytaylik, biz nom maydoniga Vasya qiymatini kiritdik va OK tugmasini bosdik. Bunday holda, brauzer serverga POST so'rovini yuboradi. So'rovning asosiy qismi: ism = Vasya & ok tugmasi = OK. PHP avtomatik ravishda $ _POST massivini to'ldiradi:
$ _POST ["ism"] = "Vasya"
$ _POST ["ok tugmasi"] = "OK"
Aslida, "Vasya" qiymati brauzer tomonidan urlencode shaklida yuboriladi; Windows-1251 kodlash uchun bu qiymat% C2% E0% F1% FF kabi ko'rinadi. Ammo, PHP avtomatik ravishda kerakli dekodlashni amalga oshirganligi sababli, biz HTTP so'rovlari bilan qo'lda ishlashga majbur bo'lgunimizcha, bu xususiyatni "unutishimiz" mumkin.
So'rov tanasi forma elementlarining turlarini emas, faqat nomlar va qiymatlarni ko'rsatganligi sababli, PHP $ _POST ["name"] kiritish satri, tugma yoki ro'yxatga mos kelishini bilmaydi. Ammo bizga, umuman olganda, bu ma'lumotlar umuman kerak emas. :)
Yuborish tugmachasida nima yozilganligini bilishimiz shart emasligi sababli, 11-qatorda tugma tavsifini qisqartirish orqali name atributini olib tashlashimiz mumkin. ... Bunday holda, brauzer ism = Vasya uchun POST so'rovini yuboradi.
Va endi - xuddi shu narsa, lekin GET shakli uchun:
agar (isset ($ _ GET ["ism"])) (
aks-sado "
Hey, ". $ _GET [" nomi "]."
!" ;}
?>
8-qator xuddi shunday yozilgan bo'lishi mumkin
Bu yerda hech qanday yangi hiyla ishlatilmaydi. Tushuning, kodni ishga tushiring, o'zgartirishga harakat qiling ...
Keling, foydalanuvchi maydonlarni qayta to'ldirishga majbur bo'lmasligi uchun oxirgi misolni o'zgartiraylik. Buning uchun shakl elementlarining qiymat atributlarini biz kiritgan qiymatlar bilan to'ldiring.
$ nomi = isset ($ _ POST ["nom"])? $ _POST ["ism"]: "";
$ yil = isset ($ _ POST ["yil"])? $ _POST ["yil"]: "";
Agar (isset ($ _ POST ["nom"], $ _POST ["yil"])) (
agar ($ _POST ["ism"] == "") (
echo "Iltimos, ism kiriting!
"
;
) else if ($ _POST ["yil"]<
1900
||
$_POST
[
"year"
] >
2004
) {
aks-sado "Tug'ilgan yilni ko'rsating! Yaroqli qiymat diapazoni: 1900..2004
"
;
) boshqa (
aks-sado "Salom". $ _POST ["ism"]. "!
"
;
$ yoshi = 2004 yil - $ _POST ["yil"];
aks-sado "sizga". $ yoshi. "yillar
"
;
}
aks-sado "
" ;
}
?>
4 va 5 qatorlar biroz tushunarsiz bo'lib chiqishi mumkin.Hammasi juda oddiy: 4-qatorni quyidagicha yozish mumkin:
agar (isset ($ _ POST ["ism"]))
$ nomi = $ _POST ["ism"];
boshqa
$ nomi = "";
Savol tug'ilishi mumkin - nega 4-5 qatorlarni tashlab, yozmaslik kerak:
Ismingizni kiriting:
">
Tug'ilgan yilingizni kiriting:
">
Gap shundaki, agar bu POST o'zgaruvchilari aniqlanmagan bo'lsa - va agar shakl hali to'ldirilmagan bo'lsa - PHP ishga tushirilmagan o'zgaruvchilardan foydalanish haqida ogohlantirishlar beradi (bundan tashqari, bu juda oqilona: bunday xabar sizga ruxsat beradi o'zgaruvchilar nomlarida topish qiyin bo'lgan matn terish xatolarini tezda toping, shuningdek, saytdagi mumkin bo'lgan "teshiklar" haqida ogohlantiradi). Siz, albatta, isset bilan kodni to'g'ridan-to'g'ri shaklga qo'yishingiz mumkin, ammo bu juda og'ir bo'lib chiqadi.
Tushundingizmi? Endi berilgan koddagi xatoni topishga harakat qiling. Xo'sh, aniq xato emas - balki kamchilik.
htmlspecialchars ()
Topmadingizmi? Men sizga maslahat beraman. Masalan, "nom" maydoniga qo'sh tirnoq va bir nechta matnni kiriting, masalan, Wa. Shaklni yuboring va natijada paydo bo'lgan sahifaning manba kodini ko'rib chiqing. To'rtinchi qator quyidagicha bo'ladi:
Ismingizni kiriting:
Ya'ni, yaxshi narsa yo'q. Agar ayyor foydalanuvchi JavaScript kodini kiritsa-chi?
Ushbu muammoni hal qilish uchun siz htmlspecialchars () funktsiyasidan foydalanishingiz kerak, bu esa xizmat belgilarini HTML tasviri bilan almashtiradi (masalan, tirnoq belgisi " bilan):
$ nomi = isset ($ _ POST ["nom"])? htmlspecialchars ($ _POST ["nom"]): "";
$ yil = isset ($ _ POST ["yil"])? htmlspecialchars ($ _POST ["yil"]): "";
Agar (isset ($ _ POST ["nom"], $ _POST ["yil"])) (
agar ($ _POST ["ism"] == "") (
echo "Iltimos, ism kiriting!
"
;
) else if ($ _POST ["yil"]<
1900
||
$_POST
[
"year"
] >
2004
) {
aks-sado "Tug'ilgan yilni ko'rsating! Yaroqli qiymat diapazoni: 1900..2004
"
;
) boshqa (
aks-sado "Salom". $ nomi. "!
"
;
$ yoshi = 2004 yil - $ _POST ["yil"];
aks-sado "sizga". $ yoshi. "yillar
"
;
}
aks-sado "
" ;
}
?>
Tajribani takrorlang va HTML to'g'ri ekanligini tekshiring.
Esda tuting - HTML maxsus belgilarni o'z ichiga olishi mumkin bo'lgan o'zgaruvchining mazmunini ko'rsatishda har doim htmlspecialchars () funksiyasidan foydalanish kerak.
phpinfo ()
Phpinfo () funksiyasi PHP tilidagi eng muhim funksiyalardan biridir. U PHP sozlamalari, turli xil konfiguratsiya o'zgaruvchilari qiymatlari haqidagi ma'lumotlarni ko'rsatadi ...
Nega men buni shakllar haqidagi maqolada eslatib o'taman? phpinfo () eng qulay disk raskadrovka vositasidir. phpinfo (), boshqa narsalar qatori, barcha $ _GET, $ _POST va $ _SERVER o'zgaruvchilari qiymatlarini chop etadi. Shunday qilib, agar shakl o'zgaruvchisi "yo'qolgan" bo'lsa, nima noto'g'ri ekanligini aniqlashning eng oson yo'li phpinfo () funktsiyasidan foydalanishdir. Funktsiya faqat o'zgaruvchilar qiymatlarini ko'rsatishi uchun (va siz o'nlab sahifalarni aylantirishingiz shart emas), uni quyidagicha chaqirish kerak: phpinfo (INFO_VARIABLES); , yoki - aynan bir xil - phpinfo (32);.
phpinfo (32);
?>
Yoki, masalan, bunday vaziyat: siz tashrif buyuruvchining IP-manzilini bilmoqchisiz. Tegishli o'zgaruvchi $ _SERVER massivida saqlanganligini eslaysiz, lekin - omadsizlik - o'zgaruvchining qanday chaqirilishini unutib qo'ydingiz. Yana phpinfo (32) ga qo'ng'iroq qiling; , biz plastinada IP-manzilimizni qidiramiz va uni $ _SERVER ["REMOTE_ADDR"] qatorida topamiz.
Ko'pgina veb-ilovalar ma'lumotlarni to'plash va serverga ma'lumotlarni yuborish uchun shakllardan foydalanadi. Shakllar odatda har xil turdagi ma'lumotlarni kiritish uchun bir nechta elementlarni o'z ichiga oladi, masalan, ism, manzil, tug'ilgan sana, elektron pochta manzili va boshqalar. HTML matn maydonlari, radio tugmalar va belgilash katakchalari kabi kiritish elementlarining bir nechta turlarini qo'llab-quvvatlaydi. HTML5 elektron pochta, parol maydoni, rang tanlash, sana va vaqtni ko'rsatish uchun vidjetlar, slayderlar kabi ko'proq maxsus elementlarni qo'shadi.
Ushbu qo'llanmaning asosiy misolida mijoz va server tomoni mavjud. Mijoz tomoni Polymer-dan foydalanuvchi interfeysini (shakllarda ko'p turdagi kiritish elementlarini o'z ichiga oladi) va Dart bilan ma'lumotlarni sinxronlash interfeysini ta'minlash uchun foydalanadi. Mijoz va server turli kutubxonalardagi ba'zi sinflar, jumladan, oqimlar, flukerlar, HttpRequest va boshqalar yordamida muloqot qiladi. Server oʻzaro domen soʻrovlaridan foydalanish uchun CORS sarlavhalaridan foydalanadi.
Izoh Ushbu maqola siz o'qigan narsangizga asoslanadi: O'z ob'ektlaringizni yaratish, Futures API-dan foydalanish, Ma'lumotlarni dinamik qayta ishlash va siz Polimer kutubxonasi, fyucherslar, JSON va HttpRequest bilan tanishishingiz kerak.
Shakllar haqida umumiy ma'lumot
Shakllar xossaga ega harakat shakl ma'lumotlarini yuborish uchun URL manzili va usuli ma'lumotlar qanday yuborilishi kerakligini belgilaydi. Harakat va usul xossalari to'g'ridan-to'g'ri HTMLda aniqlanishi mumkin, yoki murakkabroq holatda yoki ko'proq nazorat qilish uchun siz Dart kodini yozishingiz va ushbu xususiyatlarni dasturiy ravishda ochish uchun Dart kutubxonalaridan foydalanishingiz mumkin.
Kirish elementlarining harakat va usul xususiyatlarini tushunish va shakllarning standart xatti-harakatlarini tushunish uchun faqat HTML shakllari bilan asoslardan boshlaylik. Quyidagi shakl tegga kiritilgan
Harakat va usul atributlaridan foydalanish.
Va bu erda HTML kodi shaklga uchta kiritish elementini qo'shadi - matn maydoni, yuborish tugmasi va tasdiqlash qutisi.
Belgilash qutisi yorliq yorlig'iga o'ralgan, shuning uchun qiymatni o'zgartirish uchun belgilash katakchasini ham, sarlavhani ham bosishingiz mumkin.
Ushbu HTML kodi ba'zi avtomatik xatti-harakatlarni ta'minlaydi.
****
Maxsus tugmani yaratadi, u bosilganda, shakl ma'lumotlarini yuboradi. Amal va usul atributlariga asoslanib, tugma so'rov hosil qiladi va uni belgilangan URL manzilidagi serverga yuboradi.
** ism = q ** ** ism = "sayt qidiruvi" **
matn maydoni nomini va katakchaning nomini belgilaydi.
Belgilangan nomga ega bo'lgan shakl ichidagi elementlar uchun ular ushbu shakl uchun ma'lumotlarni taqdim etadi. Ushbu misolda, matn maydoni tomonidan taqdim etilgan qiymat uchun qiymat q, va belgilash katakchasi uchun qiymat beradi saytlarni qidirish bu parametrlarning ikkalasi ham yaroqli Google so‘rovi URL manzilining bir qismidir. Foydalanuvchi tugmani bosganida, ism va tegishli qiymat qidiruv URL manziliga qo'shiladi. Mana misol so'rovi:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Ushbu misol Dart yoki Javascript kodidan foydalanmasdan to'liq qurilgan. Bu juda oddiy bo'lgani uchun u odatiy HTML xatti-harakatlaridan foydalanishi mumkin: hamma uchun ochiq va URLni shakllantirish oson, shuningdek, oddiy GET so'rovi. Katta hajmdagi ma'lumotlarni o'z ichiga olgan shakllar yoki ixtisoslashtirilgan server bilan gaplashadigan veb-ilovalar uchun odatda shaklni dasturiy tarzda qayta ishlashingiz kerak.
Quyidagi misol POST so'rovi yordamida serverga ma'lumotlarni dasturiy ravishda yuboradigan yanada murakkab shaklni ko'rsatadi.
Xususan, slambook misoli
Ushbu bo'lim asosiy misollar sifatida ikkita dasturni o'z ichiga oladi.
Birinchisi, slambookserver deb nomlangan oddiy server dasturi bo'lib, u mahalliy kompyuterdagi 4040 portni tinglaydi va xabarlar yaratish va mijozga tasdiqnoma yuborish orqali POST va OPTIONS so'rovlarini bajaradi. Ilovaga boshqa serverlardan yuborilgan so'rovlardan foydalanishga ruxsat berish uchun server CORS sarlavhalaridan foydalanadi.
Ikkinchisi, foydalanuvchi ma'lumot kiritishi mumkin bo'lgan shaklni taqdim etadigan slambook deb nomlangan mijoz dasturi. Ushbu dastur Polymer-dan kirish elementlari va Dart o'zgaruvchilari o'rtasidagi ma'lumotlar ulanishini ikki barobarga oshirish uchun foydalanadi. Foydalanuvchi tugmani bosganida, Dart kodi ma'lumotlarni JSON qatoriga o'zgartiradi, server ruxsatini olish uchun OPTIONS so'rovini yuboradi va keyin ma'lumotlarni yuborish uchun POST so'rovini yuboradi. Serverdan so'rov qabul qilinganda, u mijozga ko'rsatiladi.
Quyidagi diagramma ushbu misolda server va mijoz o'rtasidagi aloqa ketma-ketligini ko'rsatadi.
Urunib ko'r! Har qanday ma'lumotlarni kiriting va tugmani bosing yuborish.
Versiya eslatmasi... Slambook polymer.dart 0.9 bilan mos keladi.
So'rov "Server yo'q" xabarini qaytaradi, chunki siz kompyuteringizda serverni ishga tushirmagansiz. Keling, buni tuzatamiz.
Server ishga tushirildi
Slambookserver.dart asosiy server dasturining manba kodini qo'llanmadagi misollardan yuklab olish mumkin.
Server dasturini buyruq satridan ishga tushiring
% dart slambookserver.dart http://127.0.0.1:4040 da GET va POST uchun tinglash
Endi yuqoridagi slambook ilovasidan maʼlumotlarni qayta yuborishga urinib koʻrishingiz mumkin.
Izoh: Agar boshqa dastur allaqachon 4040 portdan foydalanayotgan bo'lsa, server xato xabarini qaytaradi va chiqadi. Ushbu sahifadagi dastur slambookserverning mahalliy kompyuterda, 4040-portda joylashishini kutadi. Shuning uchun, ilova ishga tushishi uchun siz boshqa jarayonni tugatib, slambookserverni qayta ishga tushirishingiz kerak. Yoki server va mijoz dasturidagi port raqamini o'zgartirishingiz mumkin. 3030 dan foydalanishdan saqlaning, chunki Dart muharriri undan foydalanadi. Keyin mahalliy kompyuteringizda mijoz va serverni ishga tushiring.
Ushbu qo'llanmaning qolgan qismi server va mijoz kodini tushuntiradi.
Mijoz tomonida siz quyidagilarni bilib olasiz:
Shakl ma'lumotlarini yuborish
Shaklni qayta tiklash
Form ma'lumotlarini bog'lash uchun polimerdan foydalanish
Ushbu bo'limdagi server tomoni quyidagilar haqida gapiradi:
CORS sarlavhalari
OPTIONS so‘rovlarini ko‘rib chiqish
POST so'rovlarini qayta ishlash
Shakl ma'lumotlarini yuborish
Birinchidan, ma'lumotlarning serverga qanday yuborilishini ko'rib chiqaylik.
Eslatib o'tamiz, search_form misoli maqsad va shaklni yuborish usulini belgilash uchun harakat va usul atributlaridan foydalanishga asoslangan edi. Shuni ham esda tutingki, search_form misoli maxsus yuborish tugmachasining avtomatik harakatiga tayanadi. Boshqa tomondan, slambook misoli topshirish jarayonida bevosita ishtirok etadi:
Birinchidan, shaklda na harakat, na usul belgilanmagan.
Ikkinchidan, yuborish tugmasi Dart-da bosish moslamasiga ega
Uchinchidan, bosish moslamasi yuborish tugmachasining avtomatik harakatini bekor qiladi
Nihoyat, forma ma'lumotlari Dart kutubxonalari yordamida serverga yuboriladi.
Slambook misolidagi shakl maxsus element bilan ifodalanadi tute-slambook-form u quyidagi HTML kodi bilan ifodalanadi:
Harakat va usul atributlarining yo'qligiga e'tibor bering. Buning o'rniga, yuborish tugmasining harakati Dart-dagi tugmani bosish ishlovchisida aniqlanadi. Quyida yuborish tugmachasini yaratuvchi va uni Dart ishlov beruvchisi bilan bog'laydigan HTML kodi mavjud.
SubmitForm () tugmachasini bosish moslamasi uchun kodning o'zi:
Keling, ishlov beruvchi kodining har bir elementini ko'rib chiqaylik.
Standart ishlov beruvchini bekor qilish
Bu hodisa atributlarsiz harakat va usuli, yuborish tugmasi slambook misolida kerak bo'lmagan avtomatik xatti-harakatlarni o'z ichiga oladi. Shuning uchun, ishlov beruvchi kodining birinchi qatori standart tugma xatti-harakatlarini bekor qilish uchun e.preventDefault () ni chaqiradi.
SubmitForm bekor qilinadi (eventsiya e) (e.preventDefault (); // Birlamchi yuborishni bajarmang. ...)
POST so'rovini o'rnatish va yuborish
Keyingi kod qismi ob'ektni yaratadi HttpRequest... Ushbu kod POST so'rovini o'rnatish va yuborish uchun ishlatiladigan HttpRequest obyektini yaratish uchun new dan foydalanadi. HttpRequest klassi mos keladigan getString () funksiyasiga ega bo'lib, siz URL manzillariga muntazam GET so'rovlaridan foydalanishingiz va yuborishingiz mumkin.
Keyingi qator HttpRequest ob'ektini qayta qo'ng'iroq qilish funktsiyasi bilan ta'minlaydi onData serverdan javob olinganda chaqiriladi. OnData () funksiyasi deklaratsiyasining tafsilotlarini keyinroq ko'rib chiqamiz.
Muhim: So'rovni yuborishdan oldin qayta qo'ng'iroq qilish funksiyasini ro'yxatdan o'tkazishingiz kerak!
So'rov = yangi HttpRequest (); request.onReadyStateChange.listen (onData); var url = "http://127.0.0.1:4040"; request.open ("POST", url); request.send (slambookAsJsonData ());
Va nihoyat, funktsiya forma ma'lumotlarini serverga JSON qatori sifatida yuboradi. Ba'zan ma'lumotlar bo'laklarga bo'linadi. Ammo bu misol bir martalik ma'lumotlarni yuborish uchun etarlicha kichik. Ushbu so'rov asinxrondir, shuning uchun yuborish () usuli so'rov yuborilishi bilanoq yakunlanadi.
Serverdan javob kutilmoqda
HttpRequest server bilan gaplashmoqda. Maydon yordamida davlatni olishingiz mumkin tayyor holat HttpRequest obyekti. Tayyor holat besh xil qiymatni qabul qilishi mumkin: yuborilmagan, ochilgan, sarlavhalar qabul qilingan, yuklangan va bajarilgan. Tayyor holat o'zgarganda, HttpRequest hodisani keltirib chiqaradi va onData () qayta qo'ng'iroq qilish funktsiyasi chaqiriladi.
Hodisa ishlov beruvchisi ro'yxatdan o'tgan kod qatorini eslang onReadyStateChange:
Request.onReadyStateChange.listen (onData);
Listen () usuli uchun yagona talab qilinadigan argument imzo bilan qayta qo'ng'iroq qilish funktsiyasidir: void onData (T)... Listen () usuli, shuningdek, xato ishlov beruvchisi kabi uchta qo'shimcha argumentni aniqlash imkonini beradi.
Quyida onData () qayta qo'ng'iroq qilish funktsiyasi mavjud:
OnData bekor (_) (agar (request.readyState == HttpRequest.DONE && request.status == 200) (// Maʼlumotlar OK saqlangan. ServerResponse = "Server Sez:" + request.responseText;) agar (request.readyState) == HttpRequest.DONE && request.status == 0) (// Holati 0 ... katta ehtimollik bilan server ishlamayapti. ServerResponse =" Server yo'q";))
Koddagi birinchi qadam so'rov muvaffaqiyatli bajarilganligidir. Ha bo'lsa, javobning mazmuni nomlangan qatorga joylashtiriladi serverResponse bu slambook ilovasining matn maydoni qiymatiga bog'langan. Satr o'zgartirilganda, foydalanuvchi interfeysi foydalanuvchiga ko'rsatilgan xabar bilan avtomatik ravishda yangilanadi.
Agar so'rov xato bilan yakunlangan bo'lsa, dastur ko'rsatiladi serverResponse foydalanuvchiga ko'rsatiladigan xato xabari.
Shakldan ma'lumotlarni qayta tiklash
Qayta tiklash tugmasi maxsus HTML kiritish elementi bo'lib, sukut bo'yicha ushbu shaklga kiritilgan qiymatlarni o'chiradi. Buning o'rniga, biz tugmani forma qiymatlarini asl qiymatlariga qaytarishni xohlaymiz. Shuning uchun, qayta o'rnatish tugmasi uchun bosish moslamasi avtomatik xatti-harakatni bekor qilishi va ma'lumotlarni aniq to'ldirishi kerak.
Void resetForm (Event e) (e.preventDefault (); favoriteThings ["mushukchalar"] = yolg'on; favoriteThings ["yomg'ir tomchilari"] = yolg'on; favoriteThings ["qo'lqoplar"] = noto'g'ri; favoriteThings ["choynak"] = yolg'on; theData ["firstName"] = ""; theData ["favoriteQuote"] = ""; theData ["favoriteColor"] = "#FFFFFF"; theData ["tug'ilgan kun"] = "2013-01-01"; theMa'lumotlar ["vom. "] =" 0 "; theMa'lumotlar [" catOrDog "] =" mushuk "; theData [" musiqa "] = 0; theData [" zombi "] = false; serverResponse =" Ma'lumotlarni qayta tiklash. ";)
Server tomonini yaratish va portni tinglash
Endi keling, server tomonini ko'rib chiqaylik slambook server, u slambook mijoz ilovasidan yuborilgan so'rovga HTTP javobini qaytaradi. Backend kodi [JSON veb-xizmatlarini yaratish uchun Dartdan foydalanish (#) maqolasiga asoslangan.
Server mahalliy kompyuterdagi 4040 portni tinglaydi va faqat POST va OPTIONS so'rovlarini qayta ishlaydi. Ikkala turdagi so'rovlar kirishga ruxsat berish uchun CORS sarlavhalaridan foydalanadi. POST so'rovlari uchun server so'rovdan olingan JSON ma'lumotlarini o'z ichiga olgan qisqa tasdiqlash xabarini qaytaradi.
Keling, kodni ko'rib chiqaylik.
Slambookserver ilovasining asosiy () funktsiyasi quyida to'liq ko'rsatilgan. HttpServer sinfidan foydalangan holda, slambookserver ilovasi yuqori darajadagi funksiyani chaqirgandan so'ng, mahalliy kompyuterdagi 4040 portni tinglashni boshlaydi. bog'lamoq()
Yakuniy HOST = "127.0.0.1"; yakuniy PORT = 4040; void main () (HttpServer.bind (HOST, PORT) .keyin (gotMessage, onError: printError);)
Bind () funktsiyasi kelajakda qiymatni olishingiz mumkin bo'lgan fyuchersni qaytaradi (batafsil ma'lumot bir daqiqadan so'ng mavjud bo'ladi). Keyin () funktsiyasi fyuchers sifatida ikkita qayta qo'ng'iroq funksiyasini qayd qiladi. Birinchi funksiya gotMessage () fyuchers qiymatlarni qabul qilganda chaqiriladi. Ikkinchisi chop etish xatosi ulanishga urinish muvaffaqiyatsiz bo'lganda chaqiriladi. Xato, masalan, ushbu portda boshqa dastur allaqachon tinglayotgan bo'lsa, paydo bo'lishi mumkin.
Har bir funktsiya so'rovini qayta ishlash uchun so'rovlarni filtrlash va boshqa usullarni chaqirish gotMessage() ostida.
Void gotMessage (_server) (_server.listen ((HttpRequest so'rovi) (almashtirish (request.method) ("POST" holati: handlePost (so'rov); tanaffus; "OPTIONS" ishi: handleOptions (so'rov); tanaffus; standart: defaultHandler ( so'rov);)), onError: printError); // Tinglash muvaffaqiyatsiz tugadi.print ("http: // $ HOST: $ PORT da GET va POSTni tinglash");)
GET kabi boshqa turdagi so'rovlarni bajarish uchun siz shunchaki ko'proq qiymatlarni qo'shishingiz mumkin hol masalan "GET" holati.
Fyuchers haqida bir oz.
POST va OPTIONS so‘rovlarini ko‘rib chiqish kodiga kirishdan oldin keling, fyucherslarni qisqacha ko‘rib chiqamiz.
Fyuchers kelajakda bir muncha vaqt qiymatga ega bo'lish usulini ifodalaydi. Agar dastur ma'lumotni kutayotganda bloklanishini oldini olish uchun fyuchersdan foydalanasiz, masalan, qiymat berish uchun uzoq hisoblash talab qilinsa yoki qiymatni kiritish/chiqarish yordamida o'qish yoki qabul qilish kerak bo'lsa.
Fyuchersni qaytaruvchi funktsiya chaqirilganda, ikkita narsa sodir bo'ladi.
Funktsiya bajarish uchun navbatga qo'yiladi va darhol tugallanmagan fyuchers ob'ektini qaytaradi.
Keyinchalik, qiymat qabul qilinganda, fyuchers ob'ekti olingan qiymat bilan yoki xato bilan chiqadi.
Fyuchers tomonidan qaytarilgan qiymatni olish uchun usuldan foydalaning keyin() qayta qo'ng'iroqni ro'yxatdan o'tkazish uchun.
Ushbu misolda ham front-end, ham back-end so'rovlarni yuborish va tegishli javoblarni olish uchun fyuchersdan foydalanadi. Mijoz-server dasturlari deyarli har doim aloqa va asinxron kiritish-chiqarishning boshqa shakllari uchun fyucherslardan foydalanadi.
OPTIONS So'rovni ko'rib chiqish
Sinfdan foydalanish HttpRequest, Slambook mijoz ilovasi foydalanuvchi yuborish tugmasini bosganida so'rovlarni yuboradi. Siz ushbu maqolaning boshida kodni ko'rgansiz.
Agar mijoz va server turli xil kelib chiqishi bo'lsa, bu ilovalarda keng tarqalgan bo'lsa, POSTdan oldin oldindan so'rov yuboriladi. Oldindan soʻrovda birinchi navbatda qaysi soʻrovlarga ruxsat berilganligini aniqlash uchun OPTIONS soʻrovi boʻlishi kerak. HttpRequest klassi OPTIONSdan oldingi so'rovlarni avtomatik ravishda bajaradi. Buning uchun endi mijoz kodini yozishingiz shart emas.
Server asosiy soʻrovni qabul qilishdan oldin OPTIONS soʻrovini oladi. Mana OPTIONS so'rovlarini bajaradigan slambookserver dastur kodi.
Void handleOptions (HttpRequest req) (HttpResponse res = req.response; addCorsHeaders (res); chop etish ("$ (req.method): $ (req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. yopish ();)
Ushbu kod quyidagilarni bajaradi:
Mijozga javob yuborish serveriga g'amxo'rlik qiluvchi HttpResponse ob'ektini oladi
Kirish nazorati uchun CORS sarlavhalarini qo'shadi
Konsolga xabarni chop etadi
Javobning mazmuni yo'qligini bildiradi
Mijozga yuboriladigan javobni yakunlaydi.
Mijoz so'rovni qabul qilganda, CORS sarlavhasi POST so'rovlari qabul qilinishini bildiradi.
CORS sarlavhalari sozlanmoqda
Server ilovasi OPTIONS va POST so'rovlari uchun CORS javobiga sarlavha qo'shish uchun quyidagi funksiyadan foydalanadi. Funktsiya server javobiga uchta sarlavha qo'shadi Kirish-nazorat(ular HttpResponse javobiga kiritilgan).
addCorsHeaders (HttpResponse res) (res.headers.add ("Kirish-nazorat-ruxsat berish-kelib chiqishi", "*,"); res.headers.add ("Kirish-nazorat-ruxsat berish usullari", "POST, OPTIONS" ); res.headers.add ("Kirish-nazorat-ruxsat berish-sarlavhalar", "kelib chiqishi, X-so'ralgan-bilan, kontent turi, qabul qilish");)
CORS sarlavhasining dastlabki ikki qatori har qanday manbadan POST va OPTIONS so'rovlariga ruxsat beradi. Uchinchisi POST so'rovlarining turini va server so'rovlarni faqat ma'lum sarlavhalar bilan qabul qilishga imkon beradigan OPTIONSni belgilaydi.
POST so'rovlarini qayta ishlash
Bu erda mijozning POST so'rovlarini bajaradigan funksiya.
HandlePost bekor (HttpRequest so'rovi) (HttpResponse res = req.response; chop etish ("$ (talab usuli): $ (req.uri.path)"); addCorsHeaders (res); req.listen ((Ro'yxat)
Xuddi OPTIONS so'rovi kabi, slambookserver so'rovdan HTTP javob ob'ektini oladi, konsolga xabarni chop etadi va javobga CORS sarlavhalarini qo'shadi.
Keyinchalik, ushbu kod mijozning POST so'rovidagi ma'lumotlarni tinglaydi. Agar hammasi ma'lumotlar tayyor, qayta qo'ng'iroq qilish funksiyasi chaqiriladi. Bu funksiya xuddi shu joyda yozilgan. Funktsiya argumenti barcha ma'lumotlarni o'z ichiga olgan raqamlar ro'yxatidir. Har bir raqam UTF-16 belgisi sifatida ko'rsatilishi mumkin bo'lgan kod bilan ifodalanadi. Ammo bu haqda tashvishlanishingiz shart emas, chunki siz oddiygina usulni chaqirishingiz mumkin String.fromCharCodes oddiy satrga aylantirish uchun.
HttpResponse ob'ekti server ma'lumotlarni mijozga qaytarish uchun foydalanishi mumkin bo'lgan ma'lumotlar oqimini boshqaradi. Qayta qo'ng'iroq qilish funktsiyasi ichida slambookserver ushbu oqimga xabarlar va xom ma'lumotlarni satr sifatida yozadi. Keyinchalik murakkab serverlar ushbu ma'lumotlar bilan biror narsa qiladi, masalan, uni serverda saqlaydi, qayta ishlaydi yoki hatto bank hisobingizdan pul olib qo'yadi.
Oqim yopilganda, HttpResponse ob'ekti mijozga ma'lumotlarni yuboradi.
Slambook misol mijoz/server ilovasi o'z mijoz/server ilovangiz uchun boshlang'ich nuqta bo'lib xizmat qilishi yoki o'z ilovalaringizni qanday yaratishga misol bo'lishi mumkin.
Bu erda mijoz tomoni nima qilishi kerakligi haqidagi misol.
Foydalanuvchi ma'lumotlarini to'plash uchun shakllardan foydalaning.
Shakllaringizda alohida ma'lumotlar elementlari uchun kiritish maydonlarini joylashtiring.
Shakl ma'lumotlarini Dart kodi bilan sinxronlashtirish uchun fikr-mulohaza uchun Polymerdan foydalaning.
Ma'lumotlarni to'g'ridan-to'g'ri yuborish (shakl xususiyatlari harakati va usuli)
Yoki dasturiy jihatdan (yuborish tugmasidagi standart Dart kodining harakatini bekor qilish)
HttpRequest obyektidan server javob obyektini yarating.
Va bu erda server nima qilishi kerak.
Serverni sozlash va portni tinglash uchun HttpServer dan foydalaning.
Javoblarni qayta ishlash.
Har bir soʻrovga ruxsat berish uchun CORS sarlavhalaridan foydalaning.
So'rovga javob HttpResponse-dan foydalanadi.
Fyuchers yordamida ma'lumotlarni asinxron tarzda qayta ishlash.
Ma'lumotlarni qayta yozish uchun oqimlardan foydalaning.
Ushbu resurslarning aksariyati mijozlar va serverlarni yozishni qo'llab-quvvatlaydigan Dart kutubxonalariga asoslangan. E'tibor bering, ikkita HttpRequest klassi mavjud: biri dart: html(mijozlar uchun) va ikkinchi dart: io(serverlar uchun).
| Manba | Kutubxona | Tavsif |
|---|---|---|
| HttpRequest | dart: html | HTTP so'rovining mijoz tomoni |
| HttpRequest | dart: io | HTTP so'rovining server tomoni |
| HttpServer | dart: io | Server tomoni server bilan HTTP aloqasini boshqaradi |
| HttpResponse | dart: io | So'rovga javoblarni yuborish bilan shug'ullanadigan server tomoni |
| Oqimlar | dart: asinx | Ma'lumotlar oqimi |
| Kelajak | dart: asinx | Asinxron ma'lumotlarni olish usuli |
| Json | dart: aylantirish | Standart JSON konvertatsiya deklaratsiyasi |
| Polimer | Polimer | Shablon bilan bogʻlangan shaxsiy aʼzolar maʼlumotlari |
Polimer yordamida ma'lumotlarni ikki tomonlama bog'lash
Slambook misolida fikr-mulohazalar uchun Polymer ishlatiladi, Dart o'zgaruvchilari bilan element qiymatlarini kiritish. Agar foydalanuvchi kiritish elementining qiymatini o'zgartirsa, Dart kodidagi bog'langan o'zgaruvchi avtomatik ravishda o'zgaradi. Yoki agar qiymat Dart kodida o'zgarsa, bog'langan maxsus element ob'ekti avtomatik ravishda yangilanadi. Maxsus elementlarni aniqlash bo'yicha maqolada ma'lumotlarni ulash va Polimer haqida ko'proq ma'lumot beriladi.
Ushbu misol, shuningdek, kirish elementlari uchun funktsiyalarni ushlab turish va boshqarish uchun hodisalarni boshqarish deklaratsiyasidan foydalanadi.
Slambook misolidan foydalanib, siz turli xil kiritish elementlari, jumladan, yangi HTML5 elementlari uchun ikki tomonlama ma'lumotlarni bog'lash qanday ishlatilishini ko'rishingiz mumkin. Ushbu jadval Polymer bilan foydalanishingiz mumkin bo'lgan barcha ikki tomonlama atributlarni birlashtiradi:
Atributlardan foydalanish qiymat har qanday kirish elementida
Xususiyat qiymat har qanday kirish elementida ishlaydi va qiymatni Dart satri bilan bog'laydi. Bu misol foydalanadi qiymat vaqt tamg'asi, matn kiritish maydoni, rang tanlash, sana tanlash va diapazon tanlash uchun.
(E'tibor bering, ba'zi kodlar, masalan
Dart kodidagi lug'at nomli ma'lumotlar shakl ma'lumotlarini o'z ichiga oladi. Lug'at ob'ekt kodi bilan ta'kidlangan @kuzatilishi mumkin va qo'ng'iroqlar Kuzatish mumkin () bog'lash uchun.
Lug'at har bir kirish elementi uchun kalit / qiymat juftlarini o'z ichiga oladi, bu erda kalit qatordir. Bilan bog'langan elementlarning qiymatlari qiymat satrlardir. HTML Dartda ularning nomlaridan (identifikatorlaridan) foydalangan holda lug'at elementlariga ishora qiladi. Misol uchun, rang tanlagichning qiymati bilan bog'liq theData ['sevimli rang'].
Ochiladigan menyuda selectedIndex-dan foydalanish
Element
Foydalanish tekshirildi belgilash katakchalarida
Siz atributdan foydalanishingiz mumkin tekshirildi mantiqiy o'zgaruvchi Dart alohida belgilash qutisi bilan. Bu erda har bir katakcha alohida mantiqiy o'zgaruvchi bilan bog'langan.
Shaklning o'zi odatda foydalanuvchidan ma'lumotni serverga yuborish uchun mo'ljallangan, bu erda forma ma'lumotlari ishlov beruvchi dasturi tomonidan qabul qilinadi. Bunday dastur PHP, Perl va boshqalar kabi server tomonidagi istalgan dasturlash tilida yozilishi mumkin. Dastur manzili tegning harakat atributida ko'rsatilgan.
Ushbu misolda nom atributi (login va parol) bilan belgilangan shakl ma'lumotlari /example/handler.php manzilidagi faylga uzatiladi. Agar harakat atributi ko'rsatilmagan bo'lsa, u holda o'tkazish joriy sahifaning manziliga amalga oshiriladi.
Serverga uzatish ikki xil usulda amalga oshiriladi: GET va POST, tegdagi usulni o'rnatish uchun