iTunes შეცდომები 

ფორმის დამმუშავებელი. მონაცემების გაგზავნა ელექტრონული ფოსტით. PHP-ში მონაცემების გაგზავნის ფორმა (POST, GET)

PHP-ში GET და POST მეთოდების გამოყენება ძნელია გადაჭარბებული შეფასება, რადგან ეს მეთოდები გვხვდება თითქმის ყველა ვებსაიტზე. ქვემოთ აღწერილი მასალის შესწავლამდე, გირჩევთ გაეცნოთ html ტეგს

. მოდით განვიხილოთ თითოეული ეს მეთოდი დეტალურად.

GET მეთოდი

GET მეთოდი იყენებს URL სტრიქონს მონაცემების გადასატანად. თქვენ შეიძლება შენიშნეთ გრძელი და გაურკვეველი URL-ები. მაგალითად: function.php?login=Alex&email=dezyakin. ამ შემთხვევაში მონაცემები მუშავდება function.php-ში. კითხვის ნიშნის "?"-ის შემდეგ არის გადაცემული პარამეტრების სია (პარამეტრები გამოყოფილია "&"-ით) მნიშვნელობებით: შესვლის პარამეტრს ენიჭება მნიშვნელობა Alex, ხოლო ელ.ფოსტის ცვლადს ენიჭება მნიშვნელობა dezyakin. მონაცემები შეინახება სუპერგლობალურ მასივში $_GET. ქვემოთ მოცემულია GET მეთოდის გამოყენების მაგალითი:

შესვლა: ელფოსტა: სუპერგლობალური მასივის გამოყენებით $_GET, ჩვენ ვაჩვენებთ მიღებულ მნიშვნელობებს:*/ ექო"
შესვლა = ". $_GET[" შესვლა"] ; echo "
ფოსტა = ". $_GET["ელფოსტა"] ; ?>

დააკვირდით, როგორ ვკითხულობთ მნიშვნელობებს $_GET სუპერგლობალური მასივიდან: $_GET["ცვლადი_სახელი"]. ჩვენს მაგალითში ცვლადის სახელები გამოცხადდა ფორმით (სახელი=შესვლა და სახელი=ელ.ფოსტა).

რჩევა:
მიღებული მნიშვნელობების დამუშავებამდე გირჩევთ შეამოწმოთ მათი არსებობა ფუნქციების საშუალებით isset(ცვლადი_სახელი)ან ცარიელი (ცვლადი_სახელი)- ეს ფუნქციები განვიხილეთ წინა გაკვეთილზე 2: ცვლადები PHP-ში. მაგალითად:

არსებობის შემოწმება isset-ის გამოყენებით: if isset ($_GET["login"] ) ( ოპერატორები შესვლის დასამუშავებლად ... } //ან შეამოწმეთ არსებობა ცარიელის გამოყენებით:თუ ცარიელი ($_GET["ელფოსტა"] ) ( ოპერატორები ელფოსტის დამუშავებისთვის ... } ?>

ფორმაში შეგიძლიათ მიუთითოთ ფაილის სახელი, რომელიც დაამუშავებს გადაცემულ მნიშვნელობებს. ეს კეთდება ფორმის მოქმედების ატრიბუტის გამოყენებით, რომელსაც შეიძლება მიენიჭოს ამ ფაილის მისამართი. ნაგულისხმევად, ეს ფაილი ენიჭება მიმდინარე ფაილს (ანუ ის მუშავდება ფაილში, სადაც ფორმა მდებარეობს). აქ არის მაგალითი, რომელშიც მონაცემები ფორმიდან გადადის srcipt.php ფაილში დასამუშავებლად:

შესვლა: ელფოსტა:

script.php ფაილი უნდა შეიცავდეს რაიმე სახის ინფორმაციის დამმუშავებელს, წინააღმდეგ შემთხვევაში ინფორმაცია გადაეცემა ცარიელი.

GET მეთოდს ბევრი უარყოფითი მხარე აქვს:

  • მომხმარებელი ხედავს გავლილი პარამეტრების მნიშვნელობებს;
  • მომხმარებელს შეუძლია ადვილად გააყალბოს გავლილი პარამეტრები;
  • ორობითი ინფორმაციის არასასიამოვნო გადაცემა (თქვენ უნდა დაშიფროთ იგი ტექსტურ ფორმატში);
  • გადაცემული მონაცემების მოცულობა შეზღუდულია - 8 კბ;

ზემოაღნიშნული მინუსების გამო, GET მეთოდი გამოიყენება მხოლოდ იმ შემთხვევებში, როდესაც საჭიროა მცირე რაოდენობის მონაცემების გადაცემა და ეს მონაცემები არანაირად არ არის კლასიფიცირებული.

POST მეთოდი

POST მეთოდი განსხვავდება GET-ისგან იმით, რომ მონაცემები გადაცემულია პირადი ფორმით. არსებობს სუპერგლობალური მასივი $_POST, საიდანაც მონაცემების წაკითხვა შეიძლება ასე: $_POST ["ცვლადი_სახელი"]. მაგალითად:

შესვლა: "> ელფოსტა: ">
სუპერგლობალური მასივის $_POST გამოყენებით ჩვენ ვაჩვენებთ მიღებულ მნიშვნელობებს:*/ ექო"
შესვლა = ". $_POST[" შესვლა"] ; echo "
ფოსტა = ". $_POST["ელფოსტა"] ; ?>

ზემოთ მოყვანილი კოდის შესრულების შედეგი ნაჩვენებია ქვემოთ მოცემულ ფიგურაში:

როგორც ხედავთ, URL-ს არ აქვს პოსტსკრიპტი, მაგრამ მიუხედავად ამისა, მონაცემები მიღებული და ნაჩვენებია.

შენიშვნა:
1) POST მეთოდის გამოყენებით გადაცემული მნიშვნელობების მოცულობა ნაგულისხმევად შეზღუდულია და უდრის 8 მბ-ს. ამ მნიშვნელობის გასაზრდელად თქვენ უნდა შეცვალოთ post_max_size დირექტივა php.ini-ში.

2) PHP-ის ადრინდელ ვერსიებში, მოკლე სუპერგლობალური მასივის სახელების ნაცვლად $_GET და $_POST, უფრო გრძელი სახელები გამოიყენებოდა: $HTTP_GET_VARS და $HTTP_POST_VARS. ნაგულისხმევად, ისინი გამორთულია PHP 5-ში, მაგრამ შეგიძლიათ ჩართოთ ისინი php.ini კონფიგურაციის ფაილში register_long_arrays პარამეტრის გამოყენებით. php 6 ვერსიაში ეს გრძელი სახელები არ იქნება ხელმისაწვდომი.

3) $_POST-დან ცვლადების დამუშავებამდე, გირჩევთ, შეამოწმოთ ცვლადები მათი არსებობისთვის, როგორც ეს გაკეთდა GET მეთოდით.

ლაბორატორიული სამუშაო 1. HTTP პროტოკოლი. მეთოდები GET, POST. HTML ფორმები.

თეორიული ნაწილი

HTTP მოთხოვნის სასიცოცხლო ციკლი

  1. ბრაუზერი ხსნის კავშირსსერვერთან ერთად
  2. ბრაუზერი უგზავნის მოთხოვნას სერვერს გვერდის მისაღებად
  3. სერვერი ქმნის პასუხს (ყველაზე ხშირად HTML კოდი) ბრაუზერზე და ხურავს კავშირს
  4. ბრაუზერი ამუშავებს HTML კოდს და აჩვენებს გვერდს

ყურადღება მიაქციეთ ხაზგასმულს გაბედული. მანამდეც კი, სანამ ეკრანზე იხილავთ მოთხოვნილ გვერდს, სერვერთან კავშირი დახურულია და მას დაავიწყდა თქვენ. და როდესაც შეიყვანთ სხვა (ან იგივე) მისამართს, ან დააწკაპუნებთ ბმულზე, ან დააწკაპუნებთ HTML ფორმის ღილაკზე, იგივე ნიმუში კვლავ განმეორდება.

ამ ტიპის სამუშაოს ე.წ "კლიენტ-სერვერი". კლიენტი ამ შემთხვევაში არის ბრაუზერი.

ასე რომ, ვებ სერვერთან კავშირი გრძელდება მხოლოდ რამდენიმე წამში (ან წამის ნაწილზე) - ეს არის დროის მონაკვეთი ბმულზე (ან სხვა ტიპის მოთხოვნაზე) დაწკაპუნებასა და გვერდის ჩვენების დაწყებას შორის. ბრაუზერების უმეტესობა აჩვენებს რაიმე სახის ინდიკატორს კავშირის დროს, მაგალითად, MS Internet Explorer აჩვენებს ანიმაციას ზედა მარჯვენა კუთხეში.

იმისათვის, რომ სამუდამოდ მოვიშოროთ HTTP-ის, როგორც „შავი ყუთის“ აღქმა, მოდით, „ვიჩვენოთ“ ბრაუზერი ტელნეტის გამოყენებით:

  1. დავიწყოთ telnet ya.ru 80
  2. მოდით შევიტანოთ შემდეგი ტერმინალის ფანჯარაში (თუ შეყვანა არ არის ნაჩვენები, კარგია):

GET / HTTP/1.0[დააჭირე Enter აქ]
მასპინძელი: ya.ru[აქ დააჭირეთ Enter ორჯერ]

Enter-ის დაჭერა ჩვეულებრივ შეესაბამება CR + LF სიმბოლოების კომბინაციას, რომელიც აღინიშნება როგორც \r\n. ეს აღნიშვნა გამოყენებული იქნება ქვემოთ.

გვერდის http://ya.ru/ HTML კოდი გადის ეკრანზე. როგორც ხედავთ, არაფერია რთული.

მიმდინარე გვერდის წყაროს კოდის ნახვა შესაძლებელია თითქმის ნებისმიერ ბრაუზერში მენიუდან „ნახვა|წყაროს“ არჩევით.

სურათები, ჩარჩოები - ეს ყველაფერი დამატებითი მოთხოვნებია, ზუსტად იგივე. სინამდვილეში, საიდან მოდის ბრაუზერის ფანჯარაში არსებული სურათები: HTML კოდის გაანალიზების (დამუშავების) დროს ბრაუზერი ხვდება ტეგს https://i2.wp.com/ სურათი"> უგზავნის დამატებით მოთხოვნას სერვერს - მოთხოვნა სურათებიდა აჩვენებს მას იმ ადგილას, სადაც არის ტეგი .



სცადეთ:

ტელნეტი www.google.ru 80

მიიღეთ /php/php5ru.png HTTP/1.0\r\n
მასპინძელი: ya.ru\r\n\r\n

რასაც დაინახავთ, თუ ამ png ფაილს ტექსტურ რედაქტორში იხილავთ, ციმციმდება ეკრანზე.

I-2. HTML ფორმები. სერვერზე მონაცემების გაგზავნის მეთოდები

თქვენ ალბათ უკვე შეგხვედრიათ HTML ფორმები:

  2. შეიყვანეთ თქვენი სახელი:

ამ კოდის HTML ფაილში შენახვით და თქვენი საყვარელი ბრაუზერის გამოყენებით მისი ნახვით, ნახავთ ნაცნობ HTML ფორმას:

შეიყვანეთ თქვენი სახელი:

მოდით უფრო ახლოს მივხედოთ ამ მოკლე მაგალითში გამოყენებულ ტეგებს.

მონიშნეთ

, რომელსაც აქვს დაწყვილებული ბოლო ტეგი
, რეალურად ადგენს ფორმას. მისი ატრიბუტები ორივე არჩევითია:

  • მოქმედება- განსაზღვრავს URL (სრული ან შედარებითი), რომელსაც აქვს გაგზავნილიფორმა. ფორმის გაგზავნა არის იგივე მოთხოვნა სერვერზე, როგორც ყველა სხვა (როგორც უკვე აღვწერე ზემოთ).

თუ ეს ატრიბუტი არ არის მითითებული, ბრაუზერების უმეტესობა (უფრო ზუსტად, ჩემთვის ცნობილი ყველა ბრაუზერი) ფორმას უგზავნის მიმდინარე დოკუმენტს, ანუ „თავისთვის“. ეს არის მოსახერხებელი სტენოგრამა, მაგრამ HTML სტანდარტის მიხედვით, საჭიროა მოქმედების ატრიბუტი.

  • მეთოდი - გზა ფორმის წარდგენა. ორი მათგანია.
    • მიიღეთ- ფორმის მონაცემების გაგზავნა მისამართის ზოლში.
      თქვენ შეიძლება შეამჩნიეთ სხვადასხვა ვებსაიტებზე "?"-ის არსებობა URL-ის ბოლოს. და შემდეგი მონაცემები ფორმატში პარამეტრი=მნიშვნელობა. აქ "პარამეტრი" შეესაბამება მნიშვნელობაატრიბუტი სახელიფორმის ელემენტები (იხ. ქვემოთ ტეგის შესახებ ), ხოლო "მნიშვნელობა" - ატრიბუტის შინაარსი ღირებულება(ის შეიცავს, მაგალითად, მომხმარებლის შეყვანას იმავე ტეგის ტექსტურ ველში ).
      მაგალითად, სცადეთ რაიმეს ძებნა Yandex-ში და ყურადღება მიაქციეთ ბრაუზერის მისამართის ზოლს. ეს არის GET მეთოდი.
    • პოსტი- ფორმის მონაცემები იგზავნება მოთხოვნის ორგანო. თუ სრულიად გაუგებარია (ან სრულიად გაუგებარია) რა არის ეს, არ ინერვიულოთ, ჩვენ მალე დავუბრუნდებით ამ საკითხს.

თუ ატრიბუტი მეთოდიარ არის მითითებული - "GET" იგულისხმება.

მონიშნეთ - კომპლექტი ფორმის ელემენტი, განსაზღვრულია ატრიბუტით ტიპი :

  • მნიშვნელობა "ტექსტი"განსაზღვრავს ერთი სტრიქონიანი ტექსტის შეყვანის ველს
  • მნიშვნელობა "გაგზავნა"განსაზღვრავს ღილაკს, რომელიც დაჭერისას იწვევს გაგზავნაფორმები სერვერზე

შესაძლებელია სხვა მნიშვნელობები (და - არა ერთადერთი ტეგი, რომელიც განსაზღვრავს ფორმის ელემენტს), მაგრამ მათ განვიხილავთ შემდეგ თავებში.

მაშ, რა ხდება, როდესაც ჩვენ დააჭირეთ "OK"?

  1. ბრაუზერი უყურებს ფორმაში შემავალ ელემენტებს და მათგან აყალიბებს სახელსა და მნიშვნელობის ატრიბუტებს ფორმის მონაცემები. ვთქვათ, სახელი შეყვანილია ვასია. ამ შემთხვევაში, ფორმის მონაცემები არის name=Vasya&okbutton=OK
  2. ბრაუზერი ამყარებს კავშირს სერვერთან, უგზავნის სერვერს მოთხოვნას ატრიბუტში მითითებულ დოკუმენტზე მოქმედებატეგი
    , ატრიბუტში მითითებული მონაცემთა გაგზავნის მეთოდის გამოყენებით მეთოდი(ამ შემთხვევაში - GET), თხოვნაში ფორმის მონაცემების გადატანა.
  3. სერვერი აანალიზებს მიღებულ მოთხოვნას, ქმნის პასუხს, აგზავნის ბრაუზერში და ხურავს კავშირს
  4. ბრაუზერი აჩვენებს სერვერიდან მიღებულ დოკუმენტს

იგივე მოთხოვნის ხელით გაგზავნა (ტელნეტის გამოყენებით) ასე გამოიყურება (ვივარაუდოთ, რომ საიტის დომენის სახელია www.example.com):

ტელნეტი www.example.com 80

მიიღეთ /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
მასპინძელი: www.example.com\r\n
\r\n

როგორც უკვე მიხვდით, ფორმაზე "GET" გაგზავნის მეთოდის მქონე ღილაკზე გაგზავნის დაწკაპუნება იგივეა, რაც ბრაუზერის მისამართების ზოლში შესაბამისი URL-ის (კითხვის ნიშნით და ფორმის მონაცემების ბოლოს) აკრეფა: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

ფაქტობრივად, GET მეთოდი გამოიყენება, როდესაც თქვენ ითხოვთ დოკუმენტს სერვერისგან, უბრალოდ მისი URL-ის შეყვანით ან ბმულზე დაწკაპუნებით. გამოყენებისას , URL უბრალოდ დართულია კითხვის ნიშნით და ფორმის მონაცემებით.

ახლა მოდით შევცვალოთ ჩვენი ფორმის პირველი ხაზი შემდეგით:

ჩვენ მივუთითეთ გაგზავნის მეთოდი, როგორც "POST". ამ შემთხვევაში, მონაცემები სერვერზე იგზავნება ოდნავ განსხვავებული გზით:

ტელნეტი www.example.com 80

POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n
მასპინძელი: www.example.com\r\n
შინაარსი-ტიპი: განაცხადი/x-www-form-urlencoded\r\n
შინაარსი-სიგრძე: 22\r\n
\r\n
name=Vasya&okbutton=OK

POST მეთოდის გამოყენებისას, ფორმის მონაცემები იგზავნება "ორი შესვლის" შემდეგ - მდე სხეულიმოთხოვნა. ყველაფერი ზემოთ სიმართლეა სათაურიმოთხოვნა (და როდესაც ჩვენ ვიყენებდით GET მეთოდს, ფორმის მონაცემები იგზავნებოდა სათაურში). იმისათვის, რომ სერვერმა იცოდეს რომელ ბაიტზე უნდა შეწყვიტოს მოთხოვნის ტექსტის კითხვა, სათაური შეიცავს ხაზს შინაარსი-სიგრძე; რომ ფორმის მონაცემები გადაეცემა ფორმაში პარამეტრი1=მნიშვნელობა1&პარამეტრი2=მნიშვნელობა2..., და მნიშვნელობები გადაეცემა urlencode-ის სახით - ანუ ზუსტად ისე, როგორც GET მეთოდის გამოყენებით, მაგრამ მოთხოვნის სხეულში - სერვერს ეცნობება სათაური "შინაარსის ტიპი: აპლიკაცია/x- www-form-urlencoded“.

POST მეთოდის უპირატესობა ის არის, რომ არ არსებობს შეზღუდვა ფორმის მონაცემთა ხაზის სიგრძეზე.

POST მეთოდის გამოყენებისას შეუძლებელია ფორმის გაგზავნა უბრალოდ „ბმულის შემდეგ“, როგორც ეს იყო GET-ის შემთხვევაში.

POST ფორმის გამოყენებისას, მის ატრიბუტში მოქმედებათქვენ ასევე შეგიძლიათ მიუთითოთ GET ფორმის პარამეტრები კითხვის ნიშნის შემდეგ. ამრიგად, POST მეთოდი მოიცავს GET მეთოდს.

ბევრი ვებ აპლიკაცია იყენებს ფორმებს მონაცემების შესაგროვებლად და სერვერზე გაგზავნისთვის. ფორმები, როგორც წესი, შეიცავს რამდენიმე ელემენტს სხვადასხვა ტიპის მონაცემების შესაყვანად, როგორიცაა სახელი, მისამართი, დაბადების თარიღი, ელექტრონული ფოსტის მისამართი და ა.შ. HTML მხარს უჭერს რამდენიმე ტიპის შეყვანის ელემენტებს, მათ შორის ტექსტის ველებს, რადიო ღილაკებს და ჩამრთველ ველებს. HTML5-მა დაამატა მეტი სპეციალური ელემენტები, როგორიცაა ელფოსტა, პაროლის ველი, ფერის შერჩევა, თარიღისა და დროის ვიჯეტები და სლაიდერები.

ამ გაკვეთილის მთავარი მაგალითი შეიცავს კლიენტის მხარეს და სერვერის მხარეს. კლიენტის მხარე იყენებს პოლიმერს მომხმარებლის ინტერფეისის უზრუნველსაყოფად (ფორმები შეიცავს მრავალი ტიპის შეყვანის ელემენტებს) და მონაცემთა სინქრონიზაციის ინტერფეისს Dart-თან. კლიენტი და სერვერი ურთიერთობენ რამდენიმე კლასის გამოყენებით სხვადასხვა ბიბლიოთეკებიდან, მათ შორის ნაკადები, fluxers, HttpRequest და ა.შ. სერვერი იყენებს CORS სათაურებს ჯვარედინი დომენური მოთხოვნების გასააქტიურებლად.

კომენტარიეს სტატია ეფუძნება იმას, რაც წაიკითხეთ სექციებში: მორგებული ელემენტების შექმნა, Futures API-ის გამოყენება, მონაცემთა დინამიური დამუშავება და თქვენ უნდა იცოდეთ პოლიმერული ბიბლიოთეკა, ფიუჩერსები, JSON და HttpRequest.

ზოგადი ინფორმაცია ფორმების შესახებ

ფორმებს აქვთ თვისება მოქმედება, რომელიც არის ფორმის მონაცემების გაგზავნის URL და მეთოდირომელიც განსაზღვრავს, თუ როგორ უნდა გაიგზავნოს მონაცემები. მოქმედებისა და მეთოდის თვისებები შეიძლება განისაზღვროს პირდაპირ HTML-ში, ან უფრო რთული შემთხვევისთვის ან მეტი კონტროლის მისაღებად, შეგიძლიათ დაწეროთ Dart კოდი და გამოიყენოთ Dart ბიბლიოთეკები ამ თვისებების პროგრამულად გამოსავლენად.

დავიწყოთ საფუძვლებით, მხოლოდ HTML ფორმებით, რათა გავიგოთ შეყვანის ელემენტების მოქმედებისა და მეთოდის თვისებები და გავიგოთ ფორმების სტანდარტული ქცევა. ქვემოთ მოცემული ფორმა, ჩასმული ტეგში , გამოიყენება Google-ში მომხმარებლის შეყვანილი მონაცემების მოსაძიებლად. ინფორმაციის მოძიება ხდება საიტზე, თუ მონიშნული ველი არჩეულია (და ინტერნეტში თუ არა). ეს მაგალითი, სახელწოდებით search_form, ნაგულისხმევად ეძებს dartlang.org-ს სასარგებლო „კულინარიული წიგნის“ რესურსებს.

აქ არის HTML კოდი ფორმის შესაქმნელად:

…

მოქმედებისა და მეთოდის ატრიბუტების გამოყენება.

და აქ არის HTML კოდი, რომელიც ამატებს ფორმას შეყვანის სამ ელემენტს - ტექსტის ველი, გაგზავნის ღილაკი და ჩამრთველი.

ჩამრთველი შეფუთულია ეტიკეტის ტეგში, ასე რომ თქვენ შეგიძლიათ დააწკაპუნოთ როგორც თავად ჩამრთველზე, ასევე სათაურზე მნიშვნელობის შესაცვლელად.

ეს HTML კოდი უზრუნველყოფს გარკვეულ ავტომატურ ქცევას.

****

ქმნის სპეციალურ ღილაკს, რომელიც დაწკაპუნებისას იწვევს ფორმის მონაცემების გაგზავნას. მოქმედებისა და მეთოდის ატრიბუტებზე დაყრდნობით, ღილაკი წარმოქმნის მოთხოვნას და აგზავნის მას სერვერზე მითითებულ URL-ზე.

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

განსაზღვრავს ტექსტის ველის სახელს და ჩამრთველის სახელს.

ფორმის ელემენტებისთვის, რომლებსაც აქვთ მითითებული სახელი, ისინი აწვდიან მონაცემებს ამ ფორმისთვის. ამ მაგალითში, ტექსტის ველით მოწოდებული მნიშვნელობა არის მნიშვნელობა ქ, და ჩამრთველი იძლევა მნიშვნელობას საიტის ძებნა, ორივე ეს პარამეტრი არის Google-ის მოთხოვნის სწორი URL-ის ნაწილი. როდესაც მომხმარებელი დააჭერს ღილაკს, სახელი და შესაბამისი მნიშვნელობა ემატება საძიებო URL-ს. აქ არის მოთხოვნის მაგალითი:

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

ეს მაგალითი მთლიანად შეიქმნა Dart ან Javascript კოდის გარეშე. რადგან ის ძალიან მარტივია, მას შეუძლია გამოიყენოს HTML-ის ნორმალური ქცევა: საჯაროდ ხელმისაწვდომი და ადვილად ფორმირებადი URL-ები, ასევე რეგულარული GET მოთხოვნა. ფორმებისთვის, რომლებიც შეიცავს დიდი რაოდენობით მონაცემებს, ან ვებ აპლიკაციისთვის, რომელიც კომუნიკაციას უწევს სპეციალიზებულ სერვერს, თქვენ ჩვეულებრივ გჭირდებათ ფორმის პროგრამულად დამუშავება.

შემდეგი მაგალითი გვიჩვენებს უფრო რთულ ფორმას, რომელიც პროგრამულად გადასცემს მონაცემებს სერვერზე POST მოთხოვნის გამოყენებით.

კერძოდ slambook-ის მაგალითი

ეს განყოფილება მოიცავს ორ პროგრამას, როგორც ძირითად მაგალითს.

    პირველი არის ჩვეულებრივი სერვერის პროგრამა სახელწოდებით slambookserver, რომელიც უსმენს პორტს 4040 ლოკალურ კომპიუტერზე და ამუშავებს POST და OPTIONS მოთხოვნებს შეტყობინებების გენერირებით და კლიენტისთვის დადასტურების გაგზავნით. სერვერი იყენებს CORS სათაურებს, რათა აპლიკაციამ გამოიყენოს სხვა სერვერებიდან გაგზავნილი მოთხოვნები.

    მეორე არის კლიენტის პროგრამა სახელად slambook, რომელიც უზრუნველყოფს ფორმას, რომელშიც მომხმარებელს შეუძლია ინფორმაციის შეყვანა. ეს პროგრამა იყენებს პოლიმერს ორმაგი მონაცემების შესაერთებლად, შეყვანის ელემენტებსა და Dart ცვლადებს შორის. როდესაც მომხმარებელი დააჭერს ღილაკს, Dart კოდი გარდაქმნის მონაცემებს JSON სტრიქონად, აგზავნის OPTIONS მოთხოვნას სერვერის ნებართვის მისაღებად და შემდეგ აგზავნის POST მოთხოვნას მონაცემების გასაგზავნად. როდესაც სერვერიდან მოთხოვნა მიიღება, ის ეჩვენება კლიენტს.

შემდეგი დიაგრამა აჩვენებს სერვერსა და კლიენტს შორის კომუნიკაციის თანმიმდევრობას ამ მაგალითში.


სცადე!შეიყვანეთ ნებისმიერი მონაცემი და დააჭირეთ ღილაკს გაგზავნა.

ვერსიის შენიშვნა. slambook აპლიკაცია თავსებადია polymer.dart 0.9-თან.

მოთხოვნა აბრუნებს შეტყობინებას "სერვერი არ არის", რადგან სერვერი არ გაუშვით თქვენს აპარატზე. გამოვასწოროთ ეს.

სერვერის გაშვება

ძირითადი სერვერის პროგრამის slambookserver.dart-ის წყაროს კოდი შეგიძლიათ ჩამოტვირთოთ სამეურვეო მაგალითებიდან

გაუშვით სერვერის პროგრამა ბრძანების ხაზიდან

% dart slambookserver.dart მოსმენა GET და POST-ზე http://127.0.0.1:4040

ახლა შეგიძლიათ ხელახლა სცადოთ მონაცემების გაგზავნა ზემოთ მოცემული slambook აპლიკაციიდან.

კომენტარი: თუ სხვა პროგრამა უკვე იყენებს პორტს 4040, სერვერი დააბრუნებს შეცდომის შეტყობინებას და შეწყვეტს შესრულებას. პროგრამა ამ გვერდზე მოელის, რომ slambookserver განთავსდება ლოკალურ მანქანაზე, პორტი 4040. ამიტომ, იმისათვის, რომ აპლიკაციამ იმუშაოს, თქვენ უნდა მოხსნათ სხვა პროცესი და ხელახლა დაიწყოთ slambookserver. ან შეგიძლიათ შეცვალოთ პორტის ნომერი სერვერისა და კლიენტის პროგრამაში. მოერიდეთ 3030-ის გამოყენებას, როგორც Dart Editor იყენებს მას. შემდეგ გაუშვით კლიენტი და სერვერი თქვენს ადგილობრივ კომპიუტერზე.

ამ გაკვეთილის დანარჩენი ნაწილი განმარტავს სერვერისა და კლიენტის კოდს.

კლიენტის მხარის შესახებ შეიტყობთ:

    ფორმის მონაცემების გაგზავნა

    ფორმის გადატვირთვა

    პოლიმერის გამოყენება ფორმის მონაცემების დასაკავშირებლად

სერვერის ნაწილი ამ განყოფილებაში ისაუბრებს:

    CORS სათაურები

    მიმდინარეობს OPTIONS მოთხოვნების დამუშავება

    POST მოთხოვნების დამუშავება

ფორმის მონაცემების გაგზავნა

უპირველეს ყოვლისა, მოდით შევხედოთ, თუ როგორ იგზავნება მონაცემები სერვერზე.

შეგახსენებთ, რომ საძიებო_ფორმის მაგალითი ეფუძნებოდა მოქმედებისა და მეთოდის ატრიბუტების გამოყენებას ფორმის გაგზავნის მიზნისა და მეთოდის დასადგენად. ასევე გახსოვდეთ, რომ search_form მაგალითი ეყრდნობა სპეციალური გაგზავნის ღილაკის ავტომატურ ქცევას. მეორეს მხრივ, slambook მაგალითი უშუალოდ მონაწილეობს წარდგენის პროცესში:

    ჯერ ერთი, არც ქმედება და არც მეთოდი არ არის განსაზღვრული ფორმაში

    მეორეც, გაგზავნის ღილაკს აქვს დაწკაპუნების დამმუშავებელი Dart-ში

    მესამე, დაწკაპუნების დამმუშავებელი არღვევს გაგზავნის ღილაკის ავტომატურ ქცევას

    საბოლოოდ, ფორმის მონაცემები იგზავნება სერვერზე Dart ბიბლიოთეკების გამოყენებით

slambook-ის მაგალითში ფორმა წარმოდგენილია მორგებული ელემენტით tute-slambook-ფორმა, რომელიც წარმოდგენილია შემდეგი HTML კოდით:

გაითვალისწინეთ მოქმედებისა და მეთოდის ატრიბუტების არარსებობა. ამის ნაცვლად, გაგზავნის ღილაკის ქცევა განისაზღვრება Dart-ის ღილაკზე დაწკაპუნების დამმუშავებელში. ქვემოთ მოცემულია HTML კოდი, რომელიც ქმნის გაგზავნის ღილაკს და აკავშირებს მას Dart დამმუშავებელთან.

…

და თავად კოდი submitForm() ღილაკზე დაწკაპუნების დამმუშავებლისათვის:


მოდით შევხედოთ დამმუშავებლის კოდის თითოეულ ელემენტს

გააუქმეთ სტანდარტული დამმუშავებელი

ეს არის მოვლენა ატრიბუტების გარეშე მოქმედებადა მეთოდი, გაგზავნის ღილაკი შეიცავს ავტომატურ ქცევას, რომელიც არ არის საჭირო slambook-ის მაგალითში. ასე რომ, დამმუშავებლის კოდის პირველი ხაზი მოუწოდებს e.preventDefault() ღილაკის ნაგულისხმევი ქცევის გადაფარვას.

გაუქმებულია submitForm(event e) ( e.preventDefault(); // არ გააკეთოთ ნაგულისხმევი გაგზავნა. …)

POST მოთხოვნის დაყენება და გაგზავნა

კოდის შემდეგი ნაწილი ქმნის ობიექტს HttpRequest. ეს კოდი იყენებს ახალს HttpRequest ობიექტის გამოსაყენებლად, რომელიც გამოიყენება POST მოთხოვნის დასაყენებლად და გასაგზავნად. HttpRequest კლასს აქვს შესაბამისი getString() ფუნქცია, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ და გაგზავნოთ რეგულარული GET მოთხოვნები URL-ებზე.

შემდეგი ხაზი უზრუნველყოფს HttpRequest ობიექტს გამოძახების ფუნქციას onData, რომელიც იწოდება სერვერისგან პასუხის მიღებისას. ჩვენ მოგვიანებით განვიხილავთ onData() ფუნქციის დეკლარაციის დეტალებს.

მნიშვნელოვანი: თქვენ უნდა დაარეგისტრიროთ გამოძახების ფუნქცია მოთხოვნის გაგზავნამდე!

მოთხოვნა = new HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());

და ბოლოს, ფუნქცია აგზავნის ფორმის მონაცემებს სერვერზე JSON სტრიქონის სახით. ზოგჯერ მონაცემები იგზავნება ნაწილებად. მაგრამ ეს მაგალითი საკმარისად მცირეა, რომ მონაცემები ერთდროულად იგზავნება. ეს მოთხოვნა ასინქრონულია, ამიტომ send() მეთოდი დასრულდება მოთხოვნის გაგზავნისთანავე.

ველოდებით პასუხს სერვერისგან

HttpRequest ობიექტი დაუკავშირდება სერვერს. თქვენ შეგიძლიათ მიიღოთ სახელმწიფო ველის გამოყენებით მზა სახელმწიფო HttpRequest ობიექტი. მზა მდგომარეობას შეუძლია მიიღოს ხუთი განსხვავებული მნიშვნელობა: გაუგზავნელი, გახსნილი, მიღებული სათაურები, ჩატვირთვა და დასრულებული. როდესაც მზად მდგომარეობა იცვლება, HttpRequest ამაღლებს მოვლენას და onData() გამოძახების ფუნქცია გამოიძახება.

გავიხსენოთ კოდის ხაზი, რომელშიც რეგისტრირებულია მოვლენის დამმუშავებელი ReadyStateChange-ზე:

Request.onReadyStateChange.listen(onData);

ერთადერთი საჭირო არგუმენტი listen() მეთოდისთვის არის გამოძახების ფუნქცია ხელმოწერით: void onData(T). listen() მეთოდი ასევე საშუალებას გაძლევთ განსაზღვროთ სამი დამატებითი არგუმენტი, როგორიცაა შეცდომების დამმუშავებელი.

ქვემოთ მოცემულია გამოძახების ფუნქცია onData():

Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // მონაცემები შენახულია OK. serverResponse = "Server Sez: " + request.responseText; ) სხვა თუ (request.readyState == HttpRequest.DONE && request.status == 0) ( // სტატუსი არის 0... სავარაუდოდ სერვერი არ მუშაობს. serverResponse = "სერვერი არ არის"; ) )

პირველი, რასაც კოდი აჩვენებს, არის თუ არა მოთხოვნა წარმატებით დასრულდა. თუ კი, მაშინ პასუხის შინაარსი მოთავსებულია დასახელებულ სტრიქონში სერვერის პასუხი, რომელიც დაკავშირებულია slambook აპლიკაციის textarea ელემენტის მნიშვნელობასთან. როდესაც სტრიქონი იცვლება, მომხმარებლის ინტერფეისი ავტომატურად განახლდება და შეტყობინება გამოჩნდება მომხმარებელს.

თუ მოთხოვნა შესრულებულია შეცდომით, პროგრამა გამოვა სერვერის პასუხიშეცდომის შეტყობინება, რომელიც გამოჩნდება მომხმარებელს.

ფორმის მონაცემების გადატვირთვა

გადატვირთვის ღილაკი არის სპეციალური HTML შეყვანის ელემენტი, რომელიც ნაგულისხმევად ასუფთავებს ამ ფორმაში შეყვანილ მნიშვნელობებს. ამის ნაცვლად, ჩვენ გვინდა, რომ ღილაკმა აღადგინოს ფორმის მნიშვნელობები თავდაპირველ მნიშვნელობებზე. ამიტომ, გადატვირთვის ღილაკზე დაწკაპუნების დამმუშავებელმა უნდა გადალახოს ავტომატური ქცევა და მკაფიოდ შეავსოს მონაცემები.

Void resetForm(Event e) ( e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["წვიმის წვეთები"] = false; favoriteThings["mittens"] = მცდარი; საყვარელიThings["kettles"] = ყალბი; მონაცემები ["firstName"] = "" theData["favoriteQuote"] = "" theData["favoriteColor"] = "TheData["birthday"] = "2013-01-01"; 0"; theData["catOrDog"] = "კატა"; theData["მუსიკა"] = 0; theData["zombies"] = false; serverResponse = "მონაცემების გადატვირთვა.";)

ბექენდის შექმნა და პორტზე მოსმენა

ახლა მოდით შევხედოთ სერვერის ნაწილს, რომელსაც ე.წ slambookserver, ის აბრუნებს HTTP პასუხს Slambook კლიენტის აპლიკაციიდან გამოგზავნილ მოთხოვნაზე. სერვერის მხარის კოდი ეფუძნება სტატიას [Dart-ის გამოყენება JSON ვებ სერვისების შესაქმნელად (#)

სერვერი უსმენს პორტს 4040 ადგილობრივ აპარატზე და ამუშავებს მხოლოდ ისეთ მოთხოვნებს, როგორიცაა POST და OPTIONS. ორივე ტიპის მოთხოვნა იყენებს CORS სათაურებს წვდომის დასაშვებად. POST მოთხოვნებისთვის, სერვერი აბრუნებს მოკლე დამადასტურებელ შეტყობინებას, რომელიც მოიცავს JSON მონაცემებს, რომლებიც მან მიიღო მოთხოვნიდან.

მოდით შევხედოთ კოდს.

slambookserver აპლიკაციის main() ფუნქცია სრულად არის ნაჩვენები ქვემოთ. HttpServer კლასის გამოყენებით, slambookserver აპლიკაცია იწყებს მოსმენას ადგილობრივი აპარატის 4040 პორტზე ზედა დონის ფუნქციის გამოძახების შემდეგ. შებოჭვა()

საბოლოო HOST = "127.0.0.1"; საბოლოო PORT = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, oneError: printError); )

bind() ფუნქცია აბრუნებს მომავალს, რომელიც შეიძლება გამოყენებულ იქნას მომავალში მნიშვნელობის მისაღებად (დამატებითი ინფორმაცია სულ რაღაც წუთში იქნება). then() ფუნქცია აღრიცხავს ორ გამოძახების ფუნქციას, როგორც მომავალს. პირველი ფუნქცია, gotMessage(), გამოიძახება, როდესაც მომავალი მიიღებს მნიშვნელობებს. მეორე ბეჭდვის შეცდომადარეკვა, როდესაც კავშირის მცდელობა წარუმატებელია. შეიძლება მოხდეს შეცდომა, მაგალითად, თუ სხვა პროგრამა უკვე უსმენს იმავე პორტს.

გაფილტრეთ მოთხოვნები და გამოიძახეთ დარჩენილი მეთოდები თითოეული ტიპის ფუნქციის მოთხოვნის დასამუშავებლად მიიღო შეტყობინება() ქვემოთ.

Void gotMessage(_server) ( _server.listen((HttpRequest მოთხოვნა) ( switch (request.method) ( case "POST": handlePost(მოთხოვნა); break; case "OPTIONS": handleOptions(მოთხოვნა); break; ნაგულისხმევი: defaultHandler( მოთხოვნა ) ), onError: printError // მოსმენა ვერ მოხერხდა ("GET and POST-ის მოსმენა http://$HOST:$PORT");

სხვა ტიპის მოთხოვნების დასამუშავებლად, როგორიცაა GET, შეგიძლიათ უბრალოდ დაამატოთ მეტი მნიშვნელობა საქმემაგალითად საქმე "GET".

ცოტა ფიუჩერსების შესახებ.

მოდით შევხედოთ ფიუჩერსებს ცოტათი, სანამ გადავხედავთ POST და OPTIONS მოთხოვნების დამუშავების კოდს.

მომავალი წარმოადგენს ღირებულების მოპოვების გზას მომავალში. თქვენ იყენებთ ფიუჩერსს, რათა თავიდან აიცილოთ პროგრამის დაბლოკვა, სანამ ის ელოდება მონაცემებს, მაგალითად, თუ საჭიროა ხანგრძლივი გამოთვლა მნიშვნელობის მიწოდებისთვის, ან თუ მნიშვნელობა უნდა წაიკითხოთ ან მიიღოთ I/O გამოყენებით.

როდესაც გამოძახებულია ფუნქცია, რომელიც აბრუნებს მომავალს, ხდება ორი რამ

    ფუნქცია დგას შესასრულებლად რიგში და დაუყოვნებლივ აბრუნებს არასრულ ფიუჩერსულ ობიექტს.

    მოგვიანებით, ღირებულების მიღებისას, ფიუჩერსული ობიექტი გადის მიღებული მნიშვნელობით ან შეცდომით.

მომავალში დაბრუნებული მნიშვნელობის მისაღებად გამოიყენეთ მეთოდი მაშინ() გამოძახების დასარეგისტრირებლად.

ამ მაგალითში, როგორც კლიენტი, ასევე სერვერის მხარე იყენებს ფიუჩერსს მოთხოვნების გასაგზავნად და შესაბამისი პასუხების მისაღებად. კლიენტ-სერვერის პროგრამები თითქმის ყოველთვის იყენებენ ფიუჩერსს კომუნიკაციისთვის და სხვა ტიპის ასინქრონული I/O.

OPTIONS მოთხოვნების დამუშავება

კლასის გამოყენება HttpRequest, slambook კლიენტის აპლიკაცია აგზავნის მოთხოვნებს, როდესაც მომხმარებელი დააჭერს ღილაკს „გაგზავნა“. თქვენ იხილეთ კოდი ამ სტატიაში ადრე.

თუ კლიენტი და სერვერი განსხვავებული წარმოშობისაა, რაც ხშირია აპლიკაციებში, წინასწარი ფრენის მოთხოვნა იგზავნება POST-მდე. წინასწარი მოთხოვნა ჯერ უნდა შეიცავდეს OPTIONS მოთხოვნას, რათა დადგინდეს, რომელი მოთხოვნებია ზოგადად დაშვებული. HttpRequest კლასი ავტომატურად ამუშავებს წინაფრენის OPTIONS მოთხოვნებს. ამისათვის თქვენ აღარ გჭირდებათ კლიენტის მხარის კოდის დაწერა.

სერვერი იღებს წინასწარ OPTIONS მოთხოვნას მთავარ მოთხოვნის მიღებამდე. აქ არის კოდი slambookserver აპლიკაციისთვის, რომელიც ამუშავებს OPTIONS მოთხოვნებს.

Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; რეზ. close();

ეს კოდი აკეთებს შემდეგს:

    იღებს HttpResponse ობიექტს, რომელიც ზრუნავს სერვერზე კლიენტისთვის პასუხის გაგზავნაზე

    ამატებს CORS სათაურებს წვდომის კონტროლისთვის

    ბეჭდავს შეტყობინებას კონსოლზე

    მიანიშნებს, რომ პასუხს შინაარსი არ აქვს

    ასრულებს პასუხს, რომელიც გაეგზავნება კლიენტს.

როდესაც კლიენტი მიიღებს მოთხოვნას, CORS სათაური მიანიშნებს, რომ POST მოთხოვნები მიიღება.

CORS სათაურების დაყენება

სერვერის აპლიკაცია იყენებს შემდეგ ფუნქციას CORS პასუხისთვის OPTIONS და POST მოთხოვნების სათაურების დასამატებლად. ფუნქცია ამატებს სამ სათაურს სერვერის პასუხს წვდომა-კონტროლი(რომლებიც შედის 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");

CORS სათაურის პირველი ორი ხაზი იძლევა POST და OPTIONS მოთხოვნებს ნებისმიერი წარმოშობიდან. მესამე განსაზღვრავს მოთხოვნის ტიპს POST და OPTIONS, რომელსაც სერვერი აძლევს საშუალებას მიიღოს მოთხოვნები მხოლოდ გარკვეული სათაურებით.

მიმდინარეობს POST მოთხოვნების დამუშავება

აქ არის ფუნქცია, რომელიც ამუშავებს კლიენტის POST მოთხოვნებს.

Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((List) ბუფერი) (// დააბრუნეთ მონაცემები კლიენტს. res.write("გმადლობთ მონაცემებისთვის. ეს არის ის, რისი თქმაც გავიგე:"); res.write(new String.fromCharCodes(buffer)); res.close () onError: printError); )

ისევე როგორც OPTIONS მოთხოვნა, slambookserver იღებს HTTP საპასუხო ობიექტს მოთხოვნიდან, ბეჭდავს შეტყობინებას კონსოლში და პასუხს ამატებს CORS სათაურებს.

შემდეგი, ეს კოდი უსმენს მონაცემებს კლიენტის POST მოთხოვნიდან. თუ ყველამონაცემები მზად არის, გამოძახებულია გამოძახების ფუნქცია. ეს ფუნქცია იწერება იმავე ადგილას. ფუნქციის არგუმენტი არის რიცხვების სია, რომელიც მოიცავს ყველა მონაცემს. თითოეული რიცხვი წარმოდგენილია კოდით, რომელიც შეიძლება წარმოდგენილი იყოს UTF-16 სიმბოლოდ. მაგრამ თქვენ არ უნდა ინერვიულოთ ამაზე, რადგან შეგიძლიათ უბრალოდ დარეკოთ მეთოდი სტრიქონი.CharCodes-დანრეგულარულ სტრინგად გადაქცევა.

HttpResponse ობიექტი მართავს მონაცემთა ნაკადებს, რომლებიც სერვერს შეუძლია გამოიყენოს კლიენტისთვის მონაცემების გასაგზავნად. გამოძახების ფუნქციის შიგნით, slambookserver წერს შეტყობინებებს და წყაროს მონაცემებს, როგორც სტრიქონი ამ ნაკადში. უფრო რთული სერვერები გააკეთებენ რაღაცას ამ მონაცემებთან, როგორიცაა სერვერზე შენახვა, დამუშავება ან შესაძლოა თქვენი საბანკო ანგარიშიდან თანხის გატანა.

როდესაც ნაკადი დახურულია, HttpResponse ობიექტი აგზავნის მონაცემებს კლიენტს.

Slambook-ის ნიმუში კლიენტ-სერვერის აპლიკაცია შეიძლება გახდეს თქვენი საკუთარი კლიენტ-სერვერის აპლიკაციის საწყისი წერტილი ან მაგალითი იმისა, თუ როგორ უნდა შექმნათ თქვენი საკუთარი აპლიკაციები.

აქ არის მაგალითი იმისა, თუ რა უნდა გააკეთოს კლიენტის ნაწილმა.

    გამოიყენეთ ფორმები მომხმარებლის მონაცემების შესაგროვებლად.

    მოათავსეთ შეყვანის ველები თქვენს ფორმებზე ინდივიდუალური მონაცემების ერთეულებისთვის.

    გამოიყენეთ პოლიმერი გამოხმაურებისთვის, რათა შეინარჩუნოთ ფორმის მონაცემები Dart კოდთან სინქრონში.

    მონაცემების პირდაპირ გაგზავნა (მოქმედებისა და მეთოდის ფორმის თვისებები)

    ან პროგრამულად (გადალახავს Dart გაგზავნის ღილაკის კოდის ნაგულისხმევ ქცევას)

    შექმენით პასუხის ობიექტი სერვერზე HttpRequest ობიექტიდან.

ეს არის ის, რაც სერვერმა უნდა გააკეთოს.

    გამოიყენეთ HttpServer სერვერის კონფიგურაციისთვის და პორტზე მოსასმენად.

    პროცესების პასუხები.

    გამოიყენეთ CORS სათაურები ყველა მოთხოვნის დასაშვებად.

    მოთხოვნაზე პასუხი იყენებს HttpResponse-ს.

    დაამუშავეთ მონაცემები ასინქრონულად ფიუჩერსების გამოყენებით.

გამოიყენეთ ნაკადები პასუხზე მონაცემების ჩასაწერად.

ეს რესურსები ძირითადად დაფუძნებულია Dart ბიბლიოთეკებზე, რომლებიც უზრუნველყოფენ კლიენტებისა და სერვერების წერის მხარდაჭერას. გთხოვთ გაითვალისწინოთ, რომ არსებობს ორი HttpRequest კლასი: ერთი in dart:html(კლიენტებისთვის) და მეორე Dart:io(სერვერებისთვის).

რესურსიბიბლიოთეკააღწერა
HttpRequest dart:html HTTP მოთხოვნის კლიენტის მხარე
HttpRequest Dart:io HTTP მოთხოვნის სერვერის მხარე
HttpServer Dart:io სერვერის ნაწილი ამუშავებს HTTP კომუნიკაციას სერვერთან
HttpResponse Dart:io სერვერის ნაწილი, რომელიც ზრუნავს თხოვნაზე პასუხების გაგზავნაზე
ნაკადები Dart:ასინქრონული მონაცემთა ნაკადი
მომავალი Dart:ასინქრონული მონაცემთა ასინქრონულად მიღების საშუალება
JSON dart:convert ნაგულისხმევი JSON კონვერტაციის დეკლარაცია
პოლიმერი პოლიმერი მორგებული ელემენტების მონაცემები, რომლებიც დაკავშირებულია შაბლონთან

ორმხრივი მონაცემთა სავალდებულო პოლიმერის გამოყენებით

slambook მაგალითი იყენებს პოლიმერს უკუკავშირისთვის, შეყვანის ელემენტის მნიშვნელობა Dart ცვლადებით. თუ მომხმარებელი ცვლის შეყვანის ელემენტის მნიშვნელობას, Dart კოდში დაკავშირებული ცვლადი ავტომატურად იცვლება. ან თუ მნიშვნელობა იცვლება Dart კოდში, დაკავშირებული მორგებული ელემენტის ობიექტი ავტომატურად განახლდება. სტატიაში „მორგებული ელემენტების განსაზღვრა“ უფრო დეტალურად იქნება მოცემული მონაცემთა შეკვრისა და პოლიმერის შესახებ.

ეს მაგალითი ასევე იყენებს მოვლენის დამმუშავებლის დეკლარაციას შეყვანის ელემენტების ფუნქციების ჩასაჭრელად და დასამუშავებლად.

slambook-ის მაგალითის გამოყენებით, თქვენ ხედავთ, თუ როგორ გამოიყენება ორმხრივი მონაცემთა დაკავშირება სხვადასხვა შეყვანის ელემენტებისთვის, მათ შორის ახალი HTML5 ელემენტებისთვის. ეს ცხრილი აჯამებს ყველა ორმხრივ ატრიბუტს, რომელიც შეგიძლიათ გამოიყენოთ პოლიმერთან:

ატრიბუტის გამოყენება ღირებულებანებისმიერ შეყვანის ელემენტში

ატრიბუტი ღირებულებამუშაობს ნებისმიერ შეყვანის ელემენტზე და აკავშირებს მნიშვნელობას Dart სტრიქონთან. ეს მაგალითი იყენებს ღირებულებამონიშვნის ველის, ტექსტის შეყვანის ველის, ფერის ამომრჩევის, თარიღის ამომრჩევისა და დიაპაზონის ამომრჩევისთვის.


(გაითვალისწინეთ, რომ ზოგიერთი კოდი, მაგალითად

ლექსიკონი Dart კოდით ე.წ მონაცემებიშეიცავს ფორმის მონაცემებს. ლექსიკონის ობიექტის კოდი მონიშნულია გამოყენებით @დაკვირვებადიდა რეკავს toobservable ()შესაკრავად.

ლექსიკონი შეიცავს გასაღები/მნიშვნელობის წყვილებს თითოეული შეყვანის ელემენტისთვის, სადაც გასაღები არის სტრიქონი. ელემენტების ღირებულებები, რომლებიც დაკავშირებულია ღირებულებაარის სიმები. HTML ეხება ლექსიკონის ელემენტებს Dart-ში მათი სახელების (იდენტიფიკატორების) გამოყენებით. მაგალითად, ფერის ამომრჩევის მნიშვნელობა ასოცირდება მონაცემები['favoriteColor'].

SelectIndex-ის გამოყენება ჩამოსაშლელ მენიუში

ელემენტი



ამ მაგალითში, სახელის ატრიბუტით მითითებული ფორმის მონაცემები (შესვლა და პაროლი) გადაეცემა ფაილს მისამართზე /example/handler.php. თუ მოქმედების ატრიბუტი არ არის მითითებული, მაშინ გადატანა ხდება მიმდინარე გვერდის მისამართზე.

სერვერზე გადატანა ხდება ორი განსხვავებული მეთოდით: GET და POST, ტეგში მეთოდის დასაყენებლად

მეთოდის ატრიბუტი გამოიყენება და მისი მნიშვნელობებია get და post საკვანძო სიტყვები. თუ მეთოდის ატრიბუტი არ არის მითითებული, მაშინ ნაგულისხმევად მონაცემები იგზავნება სერვერზე GET მეთოდის გამოყენებით. მაგიდაზე სურათი 1 გვიჩვენებს განსხვავებებს ამ მეთოდებს შორის.

რომელი მეთოდი გამოიყენება, მარტივად შეიძლება განისაზღვროს ბრაუზერის მისამართის ზოლით. თუ მასში კითხვის ნიშანი გამოჩნდება და მისამართი ასე გამოიყურება, მაშინ ეს ნამდვილად არის GET.

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

მისამართების ზოლში პარამეტრების უნიკალური კომბინაცია ცალსახად განსაზღვრავს გვერდს, ამიტომ გვერდები ?q=node/add და ?q=node მისამართებით განსხვავებულად ითვლება. ამ ფუნქციას იყენებენ კონტენტის მართვის სისტემები (CMS, კონტენტის მართვის სისტემა) მრავალი ვებგვერდის შესაქმნელად. სინამდვილეში, გამოიყენება ერთი ფაილი, რომელიც იღებს GET მოთხოვნას და, შესაბამისად, ქმნის დოკუმენტის შინაარსს.

ქვემოთ ჩამოთვლილია ამ მეთოდების ტიპიური აპლიკაციები საიტებზე.

მიიღეთ

მცირე ტექსტური მონაცემების სერვერზე გადატანა; საიტის ძებნა.

საძიებო სისტემები და საიტების საძიებო ფორმები ყოველთვის იგზავნება GET მეთოდით, ეს საშუალებას გაძლევთ გაუზიაროთ ძიების შედეგები მეგობრებს, გაგზავნოთ ბმული ფოსტით ან განათავსოთ იგი ფორუმზე.

პოსტი

ფაილების გადატანა (ფოტოები, არქივები, პროგრამები და ა.შ.); კომენტარების გაგზავნა; შეტყობინებების დამატება და რედაქტირება ფორუმზე, ბლოგზე.

ნაგულისხმევად, ფორმა მუშავდება მიმდინარე ბრაუზერის ჩანართში, თუმცა ფორმის გაგზავნისას შეგიძლიათ შეცვალოთ ეს პარამეტრი და გახსნათ ფორმის დამმუშავებელი ახალ ჩანართში ან ჩარჩოში. ეს ქცევა მითითებულია „კონტექსტის სახელის“ მეშვეობით, რომელიც წარმოადგენს ტეგის სამიზნე ატრიბუტის მნიშვნელობას . პოპულარული მნიშვნელობებია _ ცარიელი ფორმის ახალ ფანჯარაში ან ჩანართში გასახსნელად და ჩარჩოს სახელი, რომელიც მითითებულია ტეგის სახელის ატრიბუტით.



ამ მაგალითში, როდესაც დააჭირეთ გაგზავნის ღილაკს, ფორმის წარდგენის შედეგი იხსნება ჩარჩოში, რომელსაც ეწოდება ტერიტორია.

ფორმის ელემენტები ტრადიციულად მოთავსებულია ტეგის შიგნით

, რითაც განსაზღვრავს მონაცემებს, რომლებიც გადაეცემა სერვერს. ამავდროულად, HTML5-ს აქვს ფორმის გამოყოფის უნარი მისი ელემენტებისაგან. ეს კეთდება მოხერხებულობისა და მრავალფეროვნებისთვის, ამიტომ რთული განლაგება შეიძლება შეიცავდეს რამდენიმე ფორმას, რომლებიც არ უნდა იკვეთებოდეს ერთმანეთთან, ან, მაგალითად, ზოგიერთი ელემენტი ნაჩვენებია სკრიპტების გამოყენებით გვერდზე ერთ ადგილას, ხოლო თავად ფორმა მდებარეობს მეორეში. . ფორმასა და მის ელემენტებს შორის კავშირი ამ შემთხვევაში ხდება ფორმის იდენტიფიკატორის მეშვეობით და ელემენტებს უნდა დაემატოს ფორმის ატრიბუტი ამ იდენტიფიკატორის ტოლი მნიშვნელობით (მაგალითი 3).

მაგალითი 3: ფორმის დაკავშირება ველებთან

HTML5 IE Cr Op Sa Fx

ფორმა



ამ მაგალითში ტეგი

ცალსახად იდენტიფიცირებულია auth იდენტიფიკატორის მეშვეობით და form="auth" ემატება ველებს, რომლებიც უნდა იყოს წარმოდგენილი ფორმის მეშვეობით. ამ შემთხვევაში ელემენტების ქცევა არ იცვლება ღილაკზე დაწკაპუნებისას, ლოგინი და პაროლი იგზავნება handler.php ოპერატორთან.

მიუხედავად იმისა, რომ ფორმის გადაცემის პარამეტრები ტრადიციულად მითითებულია ტეგში , ისინი ასევე შეიძლება გადავიდეს ფორმის გაგზავნის ღილაკებში (

რაიმე შეკითხვა?

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

გაგზავნა