"Sıfırla" yı tıklayın ve siparişi doldurun.

Bu HTML kodunu bir tarayıcı ile işlerseniz, monitör ekranında görülebilen bir web sayfası görüntülenecektir:

Kullanıcı bir düğmeyi tıklar "Sıfırla" ve alanlar varsayılan değerlerine ayarlanır. Form, kullanıcı tarafından ve bir düğmeye tıklanarak doldurulur. "Sipariş gönder" adrese gönderildi Bu e-posta adresi spam robotlarından korunuyor. Görüntülemek için JavaScript'in etkinleştirilmiş olması gerekir. Genellikle, tarayıcı formun kendisini göndermez, ancak bu çalışmayı bilgisayar işletim sisteminde varsayılan olarak yüklenen posta programına (örneğin, Outlook) devreder. Mektup şu şekilde gönderilir:

subjct: Microsoft Internet Explorer'dan gönderilen form

isim = Prohorov Viktor Sergeevich

value = Bu e-posta adresi spam robotlarından korunuyor. Görüntülemek için JavaScript'i etkinleştirmeniz gerekir.

obj = "Yönergeler"

Mektup çiftlerden oluşur isim = değer, form alanlarından sırayla seçilir.

Aşağıdaki örneğe daha yakından bakalım.

Liste form_1.html

Adınızı giriniz:

Bu kodu bir HTML dosyasına kaydederek form_1.html ve bir tarayıcı ile görüntülendiğinde HTML formu görülebilir:

Form bir kapsayıcı etiketi tarafından uygulanır ... etiketi, nitelikleriyle şunları belirtir:

Formun gönderileceği scriptin adresi;

Formda yer alan verilerin aktarım yöntemi ve özellikleri. İlköğretim ve son Etiketler formun sınırlarını tanımlar. Bunların belirtilmesi zorunludur.

Kapsayıcı etiketi özellikleri

( tüm isteğe bağlı):

? eylem--attribute, değeri belirtildiği gibi URL- talep edilenin adresi (tam veya akraba) CGI-programlar. Bu program formda yer alan verileri işleyecektir. Kaydı kullanmasına izin verilir MAILTO: URL. Bu durumda, form e-posta ile gönderilecektir. öznitelik ise eylem belirtmezseniz, formun içeriği adresine gönderilecektir. URL- bu web sayfasının yüklendiği adres, yani "kendisine". Bu kullanışlı bir kısaltmadır, ancak HTML standardına göre öznitelik eylem gereklidir.

? yöntem- bir yöntem tanımlar HTTP tarayıcıdan sunucuya form verilerini göndermek için kullanılır. Bağlanmak yöntem iki değer alabilir: elde etmek veya İleti:

¦ elde etmek- adres çubuğunda form verilerini gönderme. URL'nin sonunda "?" Karakterinin varlığını çeşitli sitelerde fark etmiş olabilirsiniz. ve formattaki aşağıdaki veriler parametre = değer. Buraya "parametre" nitelik değeriyle eşleşir isim form öğeleri (etiket hakkında aşağıya bakın ), a "anlam"- özelliğin içeriği değer(örneğin, aynı etiketin bir metin alanında kullanıcı girdisi içerir ).

Örneğin, Yandex'de bir şey aramayı deneyin ve tarayıcının adres çubuğuna dikkat edin. yol bu elde etmek.

¦ İleti- form verileri istek gövdesinde gönderilir. Ne olduğu tamamen açık değilse (veya tamamen anlaşılmazsa) endişelenmeyin, yakında bu soruya döneceğiz.

öznitelik ise yöntem belirtilmemiş - ima edilmiş "elde etmek".

? kod türü- isteğe bağlı özellik. Gönderildiğinde kodlama biçimini belirlemek için kullanılan formun içerik türünü belirtir. V HTML nitelik için iki olası değer tanımladı kod türü:

¦ BAŞVURU / X-WWW-FORM-URLENCODED(varsayılan olarak kullanılır).

¦ ÇOKLU PARÇA / FORM-VERİ.

Etiket bir metin satırı, dosya adı, parola vb. biçiminde bir giriş alanı oluşturmanıza olanak tanır. bitiş etiketi yok. Nitelikler ve kullanım özellikleri nasıl kullandığına bağlı.

Etiket - öznitelik tarafından tanımlanan form öğesini belirtir tip:

¦ Değer "Metin" tek satırlık bir metin giriş alanını belirtir.

¦ Değer "Sunmak" tıklandığında formu sunucuya gönderen düğmeyi ayarlar.

Diğer değerler de mümkündür (ve bir form öğesini tanımlayan tek etiket değildir), ancak bunlara sonraki bölümlerde bakacağız.

Peki tamam butonuna tıklandığında ne olur?

1. Tarayıcı, form ve formlara giren öğeleri niteliklerinden inceler. isim ve değer form verisi. Diyelim ki bir isim girildi Vasya... Bu durumda, form verileri: isim = Vasya & okdüğmesi = Tamam.

2. Tarayıcı sunucuyla bağlantı kurar, sunucuya öznitelikte belirtilen belge için bir istek gönderir eylem etiket öznitelikte belirtilen verileri göndermek için yöntemi kullanma yöntem(bu durumda - ELDE ETMEK), form verilerini istekte geçirme.

3. Sunucu alınan isteği analiz eder, bir yanıt oluşturur, tarayıcıya gönderir ve bağlantıyı kapatır.

4. Tarayıcı, sunucudan alınan belgeyi görüntüler.

Aynı isteği manuel olarak gönderme (kullanarak telnet) şuna benzer (sitenin alan adının www.example.com).

HTML formları. $ _POST ve $ _GET dizileri

HTML formları. Sunucuya veri gönderme yöntemleri

Muhtemelen daha önce HTML formları görmüşsünüzdür:

Adınızı giriniz:

Bu kodu bir HTML dosyasına kaydedip favori tarayıcınızla görüntüleyerek, tanıdık HTML formunu göreceksiniz:

Etiket

eşleştirilmiş bir takip etiketine sahip olmak, aslında, şekli belirler. Niteliklerinin ikisi de isteğe bağlıdır:

• eylem - formun gönderileceği URL'yi (tam veya göreli) belirtir. Bu özelliği belirtmezseniz, çoğu tarayıcı (daha doğrusu bildiğim tüm tarayıcılar) formu geçerli belgeye, yani "kendisine" gönderir. Bu kullanışlı bir kestirmedir, ancak eylem niteliği HTML standardı tarafından gereklidir.
• yöntem - formun nasıl gönderildiği. İki tane var.
  • GET - adres çubuğuna form verilerini gönderme.
    URL'nin sonunda "?" Karakterinin varlığını çeşitli sitelerde fark etmiş olabilirsiniz. ardından parametre = değer biçimindeki veriler gelir. Burada "parametre", form öğelerinin name özniteliğinin değerine karşılık gelir (aşağıdaki etiket hakkında bkz. ) ve "değer", değer özniteliğinin içeriğidir (örneğin, kullanıcının aynı etiketin metin alanına girdisini içerir) ).
    Örneğin, Yandex'de bir şey aramayı deneyin ve tarayıcının adres çubuğuna dikkat edin. Bu GET yöntemidir.
  • POST - Form verileri, isteğin gövdesinde gönderilir. Ne olduğu tamamen açık değilse (veya tamamen anlaşılmazsa) endişelenmeyin, yakında bu soruya döneceğiz.
  Metod özniteliği belirtilmemişse, GET varsayılır.

Etiket - type özniteliği tarafından tanımlanan form öğesini belirtir:

• "Metin" değeri, tek satırlık bir metin giriş alanını belirtir
• "Gönder" değeri, tıklandığında formu sunucuya gönderen düğmeyi belirtir.

Diğer değerler de mümkündür (ve form öğesini tanımlayan tek etiket değildir).

Peki tamam butonuna tıkladığımızda ne oluyor?

1. Tarayıcı, formdaki öğeleri tarar ve ad ve değer özniteliklerinden form verileri üretir. Diyelim ki Vasya adı girildi. Bu durumda form verisi name = Vasya & okbutton = OK şeklindedir.
2. Tarayıcı sunucuyla bağlantı kurar, sunucuya etiketin action özelliğinde belirtilen belge için bir istek gönderir.
   yöntem özniteliğinde (bu durumda, GET) belirtilen verileri gönderme yöntemini kullanarak, form verilerini istekte iletir.
3. Sunucu alınan isteği analiz eder, bir yanıt oluşturur, tarayıcıya gönderir ve bağlantıyı kapatır.
4. Tarayıcı, sunucudan alınan belgeyi görüntüler.

Aynı isteği manuel olarak göndermek (telnet kullanarak) şöyle görünür (sitenin alan adının www.example.com olduğu varsayılarak):

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

Muhtemelen tahmin ettiğiniz gibi, "GET" gönderme yöntemine sahip bir formdaki gönder düğmesine tıklamak, tarayıcının adres çubuğuna karşılık gelen URL'yi (sonunda bir soru işareti ve form verileriyle) girmeye benzer:

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

Aslında, GET yöntemi, sunucudan yalnızca URL'sini girerek veya bir bağlantıya tıklayarak bir belge talep ettiğinizde kullanılır. kullanma , bir soru işareti ve form verileri URL'ye eklenir.

Belki de tüm bu teknik ayrıntılar ve telnet alıştırmaları size inanılmaz sıkıcı ve hatta gereksiz geliyor ("PHP'nin bununla ne ilgisi var?"). Ama boşuna. :) Bunlar, her Web programcısının ezbere bilmesi gereken HTTP protokolü ile çalışmanın temelleridir ve bu teorik bilgi değildir - tüm bunlar pratikte kullanışlı olacaktır.

Şimdi formumuzun ilk satırını aşağıdaki ile değiştirelim:

Gönderme yöntemini "POST" olarak belirledik. Bu durumda, veriler sunucuya biraz farklı bir şekilde gönderilir:

Telnet www.example.com 80 POST /cgi-bin/form_handler.cgi HTTP / 1.0 \ r \ n Ana Bilgisayar: www.example.com \ r \ n İçerik Türü: uygulama / x-www-form-urlencoded \ r \ n İçerik Uzunluğu: 41263 \ r \ n \ r \ n adı = Vasya & okdüğmesi = Tamam

POST yöntemini kullanırken, form verileri istek gövdesinde "iki Enter-s"den sonra gönderilir. Yukarıdaki her şey aslında istek başlığıdır (ve GET yöntemini kullandığımızda, form verileri başlıkta gönderildi). Sunucunun istek gövdesini okumayı hangi bayt üzerinde sonlandıracağını bilmesi için başlık, İçerik Uzunluğu satırını içerir; form verilerinin parametre1 = değer1 ve parametre2 = değer2 ... biçiminde iletileceği ve değerlerin urlencode biçiminde iletileceği ile aynı - yani, GET yöntemini kullanmakla aynı şekilde, ancak isteğin gövdesinde - İçerik başlığı sunucuya gönderilir -Type: application / x-www-form-urlencoded.

POST yönteminin avantajı, form verilerini içeren bir satırın uzunluğunda herhangi bir sınırlama olmamasıdır.

POST yöntemini kullanırken, GET'de olduğu gibi formu basitçe "bağlantıyı takip ederek" göndermek mümkün değildir.

POST formunu kullanırken, action özelliğinde, soru işaretinden sonra GET formunun parametrelerini belirtebilirsiniz. Bu nedenle, POST yöntemi, GET yöntemini de içerir.

$ _GET ve $ _POST dizileri

Bu nedenle, formlar bir web sunucusu ve bir tarayıcı arasında veri alışverişinin ana yoludur, yani kullanıcı ile etkileşim sağlarlar - aslında web programlama bunun içindir.

Basit bir örneğe bakalım:

if ($ _SERVER ["REQUEST_METHOD"] == "POST") (
Eko "

Merhaba, ". $ _POST [" isim "]."

8-12. satırlarda gösterilen form iki öğe içerir: ad ve ok düğmesi. Method niteliği, POST formunun gönderilme yöntemini belirtirken, formun gönderildiği URL'yi belirten action niteliği, PHP_SELF sunucu değişkeninin değeri ile doldurulur - şu anda yürütülmekte olan betiğin adresi.

- için kısaltılmış gösterim .

Ad alanına Vasya değerini girdiğimizi ve Tamam butonuna tıkladığımızı varsayalım. Bu durumda, tarayıcı sunucuya bir POST isteği gönderir. İstek gövdesi: isim = Vasya & okdüğmesi = Tamam. PHP, $ _POST dizisini otomatik olarak doldurur:

$ _POST ["isim"] = "Vasya"
$ _POST ["okbutton"] = "Tamam"

Aslında "Vasya" değeri tarayıcı tarafından urlencode biçiminde gönderilir; Windows-1251 kodlaması için bu değer %C2% E0% F1% FF gibi görünür. Ancak, PHP gerekli kod çözme işlemini otomatik olarak gerçekleştirdiğinden, HTTP istekleriyle manuel olarak çalışmak zorunda kalana kadar bu özelliği "unutabiliriz".

İstek gövdesi, form öğelerinin türlerini değil, yalnızca adları ve değerleri belirttiğinden, PHP'nin $ _POST ["name"] öğesinin bir girdi dizesi, düğme veya listeyle eşleşip eşleşmediği konusunda hiçbir fikri yoktur. Ancak genel olarak bu bilgilere hiç ihtiyacımız yok. :)

Gönder düğmesinde ne yazdığını bilmemize gerek olmadığı için, 11. satırda düğme açıklamasını kısaltarak name niteliğini kaldırabiliriz. ... Bu durumda, tarayıcı isim = Vasya için bir POST isteği gönderecektir.

Ve şimdi - aynı şey, ancak GET formu için:

if (isset ($ _ GET ["ad"])) (
Eko "

Merhaba, ". $ _GET [" isim "]."

8. satır da yazmış olabilir

: GET varsayılan yöntemdir. Bu sefer tarayıcı, adres çubuğuna adres girmeye eşdeğer bir GET isteği gönderir: http://site adresi / komut dosyası adı.php?Ad = Vasya.

PHP, GET formlarını, $ _GET dizisinin doldurulması farkıyla, POST ile tamamen aynı şekilde işler.

Temel fark 4. satırdadır. Tarayıcı satırına basitçe bir adres girmek bir GET isteği olduğundan, ($ _SERVER ["REQUEST_METHOD"] == "GET") kontrolünün anlamsız olup olmadığını kontrol edin. Bu nedenle, verilen değişken tanımlanmışsa (yani bir değer atanmışsa) true ve değişken tanımlanmamışsa false döndüren isset() yapısına başvururuz. Form doldurulmuşsa - zaten anladığınız gibi, PHP otomatik olarak uygun değere $ _GET ["name"] atar.

isset() kontrol yöntemi evrenseldir; POST formu için de kullanılabilir. Ayrıca hangi form alanlarının doldurulduğunu bulmanızı sağladığı için tercih edilir.

Biraz daha karmaşık bir örnek.

echo "Lütfen bir isim giriniz!
" ;
< 1900 || $_POST [ "year" ] > 2004 ) {
Eko
" ;
) Başka (

" ;

yankı "size". $ yaş. "yıllar
" ;
}
Eko "

Burada yeni numaralar kullanılmaz. Anlayın, kodu çalıştırın, değiştirmeyi deneyin ...

Son örneği değiştirelim ki kullanıcı alanları tekrar doldurmak zorunda kalmasın. Bunu yapmak için form öğelerinin değer niteliklerini az önce girdiğimiz değerlerle doldurun.

$ isim = isset ($ _ POST ["isim"])? $ _POST ["isim"]: "";
$ yıl = isset ($ _ POST ["yıl"])? $ _POST ["yıl"]: "";

if (isset ($ _ POST ["ad"], $ _POST ["yıl"])) (
if ($ _POST ["ad"] == "") (
echo "Lütfen bir isim giriniz!
" ;
) else if ($ _POST ["yıl"]< 1900 || $_POST [ "year" ] > 2004 ) {
Eko "Doğum yılını belirtin! Geçerli değer aralığı: 1900..2004
" ;
) Başka (
yankı "Merhaba". $ _POST ["ad"]. "!
" ;
$ yaş = 2004 - $ _POST ["yıl"];
yankı "size". $ yaş. "yıllar
" ;
}
Eko "

4. ve 5. satırlar biraz anlaşılmaz olabilir.Her şey çok basit: 4. satır şöyle yazılabilir:

if (isset ($ _ POST ["ad"]))
$ isim = $ _POST ["isim"];
Başka
$ isim = "";

Soru ortaya çıkabilir - neden 4-5 satırlarını atıp şunu yazmıyorsunuz:

Adınızı giriniz: ">

Doğum yılınızı girin: ">

Gerçek şu ki, bu POST değişkenleri tanımlanmadıysa - ve form henüz doldurulmadıysa - PHP başlatılmamış değişkenlerin kullanımı hakkında uyarılar verecektir (ayrıca, oldukça makul: böyle bir mesaj size izin verir. değişken adlarında bulunması zor yazım hatalarını hızlı bir şekilde bulur ve ayrıca sitedeki olası "delikler" hakkında uyarır). Elbette isset ile kodu doğrudan forma koyabilirsiniz, ancak çok hantal olacaktır.

Anlaşıldı? Şimdi verilen koddaki hatayı bulmaya çalışın. Şey, tam olarak bir hata değil - ama bir kusur.

htmlözel karakterler ()

Bulamadın mı? Sana bir ipucu vereceğim. Örneğin, "ad" alanına bir çift tırnak işareti ve bir metin girin, örneğin Wa. Formu gönderin ve ortaya çıkan sayfanın kaynak koduna bakın. Dördüncü satır şöyle bir şey olacaktır:

Adınızı giriniz:

Yani, iyi bir şey yok. Ya kurnaz bir kullanıcı JavaScript kodunu girerse?

Bu sorunu çözmek için, hizmet karakterlerini HTML temsilleriyle değiştirecek olan htmlspecialchars () işlevini kullanmanız gerekir (örneğin, alıntı - " ile):

$ isim = isset ($ _ POST ["isim"])? htmlspecialchars ($ _POST ["ad"]): "";
$ yıl = isset ($ _ POST ["yıl"])? htmlspecialchars ($ _POST ["yıl"]): "";

if (isset ($ _ POST ["ad"], $ _POST ["yıl"])) (
if ($ _POST ["ad"] == "") (
echo "Lütfen bir isim giriniz!
" ;
) else if ($ _POST ["yıl"]< 1900 || $_POST [ "year" ] > 2004 ) {
Eko "Doğum yılını belirtin! Geçerli değer aralığı: 1900..2004
" ;
) Başka (
yankı "Merhaba". $ adı. "!
" ;
$ yaş = 2004 - $ _POST ["yıl"];
yankı "size". $ yaş. "yıllar
" ;
}
Eko "

Deneyi tekrarlayın ve HTML'nin şimdi doğru olduğunu görün.

Unutmayın - HTML özel karakterleri içerebilecek bir değişkenin içeriğini görüntülerken htmlspecialchars () işlevi her zaman kullanılmalıdır.

phpinfo ()

phpinfo() işlevi, PHP'deki en önemli işlevlerden biridir. PHP ayarları, çeşitli konfigürasyon değişkenlerinin değerleri hakkında bilgi görüntüler...

Formlarla ilgili makalede neden bahsediyorum? phpinfo () en uygun hata ayıklama aracıdır. phpinfo (), diğer şeylerin yanı sıra, tüm $ _GET, $ _POST ve $ _SERVER değişkenlerinin değerlerini yazdırır. Bu nedenle, bir form değişkeni "kayıp" ise, neyin yanlış olduğunu bulmanın en kolay yolu phpinfo () işlevini kullanmaktır. İşlevin yalnızca değişkenlerin değerlerini görüntülemesi için (ve bir düzine sayfayı kaydırmanız gerekmez), şu şekilde çağrılmalıdır: phpinfo (INFO_VARIABLES); veya - tam olarak aynı olan - phpinfo (32);.

">
Adınızı giriniz:


phpinfo (32);
?>

Veya örneğin böyle bir durum: Bir ziyaretçinin IP adresini öğrenmek istiyorsunuz. Karşılık gelen değişkenin $ _SERVER dizisinde saklandığını hatırlıyorsunuz, ama - kötü şans - değişkenin tam olarak nasıl çağrıldığını unuttunuz. Yine, phpinfo'yu (32) arayın; , plakada IP adresimizi arıyoruz ve onu buluyoruz - $ _SERVER ["REMOTE_ADDR"] satırında.

Sitede en çok talep edilen işlevlerden biri, verileri site sahibine posta yoluyla gönderilen başvuru veya sipariş formudur. Kural olarak, bu tür formlar basittir ve veri girişi için iki veya üç alandan oluşur. Böyle bir sipariş formu nasıl oluşturulur? Bu, HTML biçimlendirme dilinin ve PHP programlama dilinin kullanılmasını gerektirecektir.

HTML biçimlendirme dilinin kendisi basittir, sadece belirli etiketleri nasıl ve nereye koyacağınızı bulmanız yeterlidir. PHP programlama dili ile işler biraz daha karmaşıktır.

Bir programcı için böyle bir form oluşturmak zor olmayacaktır, ancak bir HTML kodlayıcı için bazı işlemler zor görünebilir.

Html'de veri göndermek için bir form oluşturun

İlk satır sonraki olacak

Bu, formun çok önemli bir unsurudur. İçinde verilerin hangi şekilde ve hangi dosyaya aktarılacağını belirtiyoruz. Bu durumda, her şey send.php dosyasına POST yöntemiyle gönderilir. Bu dosyadaki program sırasıyla verileri kabul etmeli, bunlar posta dizisinde yer alacak ve belirtilen e-posta adresine gönderecektir.

Forma geri dönelim. İkinci satır, tam adınızı girmek için bir alan içerecektir. Aşağıdaki koda sahiptir:

Form türü metindir, yani kullanıcı buraya klavyeden metin girebilir veya metin kopyalayabilir. name parametresi formun adını içerir. Bu durumda, bu fio, kullanıcının bu alana girdiği her şeyin iletileceği bu isim altında. Yer tutucu parametresi bu alana açıklama olarak ne yazılacağını belirtir.

Sonraki satır:

Burada hemen hemen her şey aynı ama alanın adı e-posta ve açıklama, kullanıcının e-posta adresini bu forma girmesi gerektiğini gösteriyor.

Bir sonraki satır "gönder" düğmesi olacaktır:

Ve formdaki son satır etiket olacak

Şimdi hepsini bir araya getirelim.

Şimdi formdaki alanları zorunlu hale getireceğiz. Aşağıdaki koda sahibiz:

HTML formundan veri kabul eden bir dosya oluşturun

Bu send.php adlı bir dosya olacak

Dosyada, ilk aşamada post dizisinden veri kabul etmeniz gerekir. Bunu yapmak için iki değişken oluşturuyoruz:

$ fio = $ _POST ["fio"];
$ eposta = $ _POST ["eposta"];

PHP'de değişken isimlerinden önce $ işareti koyun, her satırın sonuna noktalı virgül koyun. $ _POST, formdaki verilerin iletildiği bir dizidir. Html formunda, gönderme yöntemi method = "post" olarak belirtilir. Böylece, html formundan iki değişken alınır. Sitenizi korumak amacıyla, bu değişkenleri birkaç filtreden - php fonksiyonlarından geçirmeniz gerekir.

İlk işlev, kullanıcının forma eklemeye çalıştığı tüm karakterleri dönüştürür:

Bu durumda, php'de yeni değişkenler oluşturulmaz, mevcut olanlar kullanılır. Filtrenin yapacağı şey, " karakterini dönüştürmektir.<" в "<". Также он поступить с другими символами, встречающимися в html коде.

Kullanıcı forma eklemeye çalışırsa, ikinci işlev url'nin kodunu çözecektir.

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

Üçüncü fonksiyonda, eğer varsa, dizgenin başındaki ve sonundaki boşlukları kaldıracağız:

$ fio = kırp ($ fio);
$ email = kırpma ($ email);

PHP değişkenlerini filtrelemek için başka işlevler de vardır. Bunların kullanımı, bir saldırganın html postasına veri göndermenin bu biçimine kod eklemeye çalışacağından ne kadar korktuğunuza bağlıdır.

HTML formundan PHP dosyasına geçirilen verileri doğrulama

Bu kodun çalışıp çalışmadığını, verilerin aktarılıp aktarılmadığını kontrol etmek için, yankı işlevini kullanarak bunu ekranda görüntüleyebilirsiniz:

yankı $ fio;
Eko "
";
yankı $ fio;

İkinci satır, php değişkenlerinin çıktısını farklı satırlara bölmek için burada.

PHP kullanarak HTML formundan alınan verileri postaya gönderme

Postaya veri göndermek için PHP'deki posta işlevini kullanmanız gerekir.

posta ("hangi adrese gönderilecek", "mektubun konusu", "Mesaj (mesaj gövdesi)", "Kimden: mektubun hangi e-postadan gönderildiği \ r \ n");

Örneğin, site sahibinin veya yöneticisinin e-postasına veri göndermeniz gerekir. [e-posta korumalı]

E-postanın konu satırı açık olmalı ve e-posta mesajı, kullanıcının HTML formunda belirttiğini içermelidir.

posta (" [e-posta korumalı]"," Siteden uygulama "," Tam ad: ". $ Fio.". E-posta: ". $ E-posta," Kimden: [e-posta korumalı]\ r \ n ");

Formun belirtilen e-posta adresine PHP kullanılarak gönderilip gönderilmediğini kontrol edecek bir koşul eklemeniz gerekir.

if (posta (" [e-posta korumalı]"," Siteden sipariş ver "," Tam ad: ". $ Fio.". E-posta: ". $ E-posta," Kimden: [e-posta korumalı]\ r \ n "))
{
echo "mesaj başarıyla gönderildi";
) Başka (
}

Böylece HTML form verilerini maile gönderecek olan send.php dosyasının program kodu şöyle görünecektir:

$ fio = $ _POST ["fio"];
$ eposta = $ _POST ["eposta"];
$ fio = htmlözel karakterler ($ fio);
$ email = htmlspecialchars ($ email);
$ fio = urldecode ($ fio);
$ email = urldecode ($ email);
$ fio = kırp ($ fio);
$ email = kırpma ($ email);
// yankı $ fio;
// Eko "
";
// yankı $ e-posta;
if (posta (" [e-posta korumalı]"," Siteden uygulama "," Tam ad: ". $ Fio.". E-posta: ". $ E-posta," Kimden: [e-posta korumalı]\ r \ n "))
(echo "mesaj başarıyla gönderildi";
) Başka (
echo "mesaj gönderilirken hata oluştu";
}?>

Dosyaya iletilen verilerin yorumlanıp yorumlanmadığını kontrol etmek için üç satır. Gerekirse, yalnızca hata ayıklama için gerekli olduklarından bunları kaldırabilirsiniz.

HTML ve PHP form gönderme kodunu tek bir dosyaya koymak

Bu makaleye yapılan yorumlarda, birçok kişi postaya veri göndermek için hem HTML formunun hem de PHP kodunun iki değil, tek bir dosyada nasıl yapılacağı sorusunu soruyor.

Böyle bir çalışmayı uygulamak için, formun HTML kodunu send.php dosyasına koymanız ve POST dizisindeki değişkenlerin varlığını kontrol edecek bir koşul eklemeniz gerekir (bu dizi formdan geçirilir). Yani dizideki değişkenler mevcut değilse, formu kullanıcıya göstermeniz gerekir. Aksi takdirde, diziden veri kabul etmeniz ve muhataba göndermeniz gerekir.

Send.php dosyasındaki PHP kodunun nasıl değiştirileceğini görelim:

// POST dizisinde değişkenlerin olup olmadığını kontrol edin
if (! isset ($ _ POST ["fio"]) ve! isset ($ _ POST ["email"])) (
?>

) Başka (
// formu göster
$ fio = $ _POST ["fio"];
$ eposta = $ _POST ["eposta"];
$ fio = htmlözel karakterler ($ fio);
$ email = htmlspecialchars ($ email);
$ fio = urldecode ($ fio);
$ email = urldecode ($ email);
$ fio = kırp ($ fio);
$ email = kırpma ($ email);
if (posta (" [e-posta korumalı]"," Siteden uygulama "," Tam ad: ". $ Fio.". E-posta: ". $ E-posta," Kimden: [e-posta korumalı]\ r \ n ")) (
echo "Mesaj başarıyla gönderildi";
) Başka (
echo "Mesaj gönderilirken hata oluştu";
}
}
?>

PHP isset() fonksiyonunu kullanarak POST dizisindeki bir değişkenin varlığını kontrol ederiz. Bir koşulda bu işlevin önüne ünlem işareti gelmesi olumsuzlama anlamına gelir. Yani değişken yoksa formumuzu göstermemiz gerekiyor. Ünlem işareti koymamış olsaydım, koşul tam anlamıyla "varsa, formu gösterin" anlamına gelirdi. Ve bu bizim durumumuzda yanlış. Doğal olarak, index.php olarak yeniden adlandırabilirsiniz. Dosyayı yeniden adlandırırsanız, dosya adını ve satırında yeniden adlandırmayı unutmayın.

... Form aynı sayfaya bağlanmalıdır, örneğin index.php. Sayfanın başlığını koda ekledim.

Bir siteden PHP formu gönderirken oluşan yaygın hatalar

İlki, muhtemelen en yaygın hata, mesaj içermeyen boş bir beyaz sayfa görmenizdir. Bu, sayfa kodunda bir hata yaptığınız anlamına gelir. PHP'deki tüm hataların görüntülenmesini etkinleştirmeniz gerekir ve ardından hatanın nerede yapıldığını göreceksiniz. Kodunuza ekleyin:

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

send.php dosyası yalnızca sunucuda çalıştırılmalıdır, aksi takdirde kod çalışmayacaktır. Her zaman harici bir posta sunucusuna veri göndermek üzere yapılandırılmadığından bunun yerel bir sunucu olmaması istenir. Kodu sunucu olmayan bir tarafta çalıştırırsanız, PHP kodu doğrudan sayfada görüntülenecektir.

Bu nedenle doğru işlem için send.php dosyasını hosting sitesine yerleştirmenizi tavsiye ederim. Orada, kural olarak, her şey zaten yapılandırılmıştır.

Başka bir yaygın hata, "Mesaj başarıyla gönderildi" bildiriminin görünmesi ve mektubun postaya ulaşmamasıdır. Bu durumda, satırı dikkatlice kontrol etmeniz gerekir:

if (posta (" [e-posta korumalı]"," Siteden sipariş ver "," Tam ad: ". $ Fio.". E-posta: ". $ E-posta," Kimden: [e-posta korumalı]\ r \ n "))

Onun yerine [e-posta korumalı] mektubu göndermek istediğiniz bir e-posta adresi olmalı ve bunun yerine[e-posta korumalı] bu sitenin mevcut bir e-postası olmalıdır. Örneğin, bir site için site ... Sadece bu durumda formdaki verileri içeren bir mektup gönderilecektir.

Birçok web uygulaması, veri toplamak ve sunucuya veri göndermek için formları kullanır. Formlar genellikle ad, adres, doğum tarihi, e-posta adresi vb. gibi çeşitli veri türlerini girmek için çeşitli öğeler içerir. HTML, metin alanları, radyo düğmeleri ve onay kutuları dahil olmak üzere çeşitli giriş öğelerini destekler. HTML5, e-posta, şifre alanı, renk seçici, tarih ve saati görüntülemek için widget'lar, kaydırıcılar gibi daha özel öğeler ekler.

Bu öğreticinin ana örneği, istemci ve sunucu tarafını içerir. İstemci tarafı, bir kullanıcı arabirimi (formlar birçok türde girdi öğesi içerir) ve Dart ile bir veri senkronizasyon arabirimi sağlamak için Polimer kullanır. İstemci ve sunucu, akışlar, fluker'lar, HttpRequest vb. dahil olmak üzere çeşitli kitaplıklardan bazı sınıfları kullanarak iletişim kurar. Sunucu, etki alanları arası istekleri kullanmak için CORS başlıklarını kullanır.

Yorum Yap bu makale, bölümlerde okuduklarınızın üzerine inşa edilmiştir: Kendi elemanlarınızı yaratmak ,Vadeli İşlemler API'sini Kullanma Dinamik veri işleme ve Polimer kitaplığı, vadeli işlemler, JSON ve HttpRequest hakkında bilgi sahibi olmalısınız.

Formlar hakkında genel bilgiler

Formların bir özelliği vardır eylem form verilerini göndermek için URL'dir ve yöntem bu, verilerin nasıl gönderileceğini tanımlar. Eylem ve yöntem özellikleri doğrudan HTML'de tanımlanabilir veya daha karmaşık bir durumda veya daha fazla kontrol için Dart kodu yazabilir ve bu özellikleri programlı olarak sağlamak için Dart kitaplıklarını kullanabilirsiniz.

Girdi öğelerinin eylem ve yöntem özelliklerini anlamak ve formların standart davranışını anlamak için yalnızca HTML formlarıyla temel bilgilerle başlayalım. Aşağıdaki form, bir etiket içine alınmış , Google'da kullanıcı tarafından girilen verileri aramak için kullanılır. Onay kutusu seçiliyse sitede (ve değilse İnternette) bilgi aranır. search_form adlı bu örnek, varsayılan olarak dartlang.org'da yararlı "yemek kitabı" kaynaklarını arar.

İşte formu oluşturmak için HTML kodu:

…

Eylem ve yöntem özniteliklerini kullanma.

Ve işte forma üç giriş öğesi ekleyen HTML kodu - bir metin alanı, bir gönder düğmesi ve bir onay kutusu.

dartlang.org'da ara

Onay kutusu bir etiket etiketine sarılmıştır, böylece değeri değiştirmek için hem onay kutusunun kendisine hem de başlığa tıklayabilirsiniz.

Bu HTML kodu, bazı otomatik davranışlar sağlar.

****

Tıklandığında form verilerini gönderen özel bir düğme oluşturur. Eylem ve yöntem özniteliklerine bağlı olarak, düğme bir istek oluşturur ve bunu belirtilen URL'deki sunucuya gönderir.

** ad = q ** ** ad = "site araması" **

metin alanının adını ve onay kutusunun adını tanımlar.

Belirli bir ada sahip bir form içindeki öğeler için, o forma ilişkin verileri sağlayın. Bu örnekte, metin kutusu tarafından sağlanan değer, Q ve onay kutusu için bir değer sağlar site araması bu parametrelerin her ikisi de geçerli bir Google istek URL'sinin parçasıdır. Kullanıcı düğmeyi tıkladığında, ad ve karşılık gelen değer arama URL'sine eklenir. İşte örnek bir istek:

Http://www.google.com/search?q=Yemek kitabı&sitesearch=dartlang.org

Bu örnek tamamen Dart veya Javascript kodu kullanılmadan oluşturulmuştur. Çok basit olduğu için, olağan HTML davranışını kullanabilir: halka açık ve bir URL oluşturması kolay, ayrıca normal bir GET isteği. Büyük miktarda veri içeren formlar veya özel bir sunucuyla konuşan bir web uygulaması için, genellikle formu programlı olarak işlemeniz gerekir.

Aşağıdaki örnek, bir POST isteği kullanarak sunucuya programlı olarak veri gönderen daha karmaşık bir formu göstermektedir.

Özellikle bir slambook örneği

Bu bölüm, temel örnekler olarak iki program içermektedir.

İlki, yerel makinede 4040 numaralı bağlantı noktasını dinleyen ve mesaj oluşturarak ve istemciye bir bildirim göndererek POST ve OPTIONS isteklerini işleyen slambookserver adlı ortak bir sunucu programıdır. Sunucu, uygulamanın diğer sunuculardan gönderilen istekleri kullanmasına izin vermek için CORS başlıklarını kullanır.

İkincisi, kullanıcının bilgi girebileceği bir form sağlayan slambook adlı bir istemci programıdır. Bu program, girdi öğeleri ve Dart değişkenleri arasındaki veri bağlantısını ikiye katlamak için Polimer kullanır. Kullanıcı düğmeyi tıkladığında, Dart kodu verileri bir JSON dizesine dönüştürür, sunucu izni almak için bir SEÇENEKLER isteği gönderir ve ardından verileri göndermek için bir POST isteği gönderir. Sunucudan bir istek alındığında, istemciye görüntülenir.

Aşağıdaki şema, bu örnekte sunucu ve istemci arasındaki iletişimin sırasını göstermektedir.

Dene! Herhangi bir ayrıntı girin ve düğmesine tıklayın göndermek.

sürüm notu... Slambook, polimer.dart 0.9 ile uyumludur.

Sunucuyu makinenizde başlatmadığınız için istek “Sunucu yok” mesajını döndürür. Bunu düzeltelim.

Sunucu başlangıcı

Ana sunucu programı slambookserver.dart'ın kaynak kodu kılavuzdaki örneklerden indirilebilir.

Sunucu programını komut satırından çalıştırın

% dart slambookserver.dart http://127.0.0.1:4040'ta GET ve POST için dinleme

Artık yukarıdaki slambook uygulamasından veri göndermeyi tekrar deneyebilirsiniz.

Yorum Yap: Başka bir program zaten 4040 numaralı bağlantı noktasını kullanıyorsa, sunucu bir hata mesajı verir ve çıkar. Bu sayfadaki program, slambookserver'ın yerel makinede, port 4040'ta bulunmasını bekler. Bu nedenle, uygulamanın çalışması için başka bir işlemi sonlandırmanız ve slambookserver'ı yeniden başlatmanız gerekir. Veya sunucu ve istemci programında port numarasını değiştirebilirsiniz. 3030'u Dart Editörü kullandığı için kullanmaktan kaçının. Ardından yerel makinenizde istemciyi ve sunucuyu başlatın.

Bu öğreticinin geri kalanında sunucu ve istemci kodu açıklanmaktadır.

İstemci tarafında şunları öğreneceksiniz:

Form verilerini gönderme

Formu sıfırlama

Form Verilerini Bağlamak için Polimer Kullanma

Bu bölümdeki sunucu tarafı şunlardan bahsedecek:

CORS başlıkları

SEÇENEK isteklerini işleme

POST isteklerini işleme

Form verilerini gönderme

Öncelikle verilerin sunucuya nasıl gönderildiğine bir göz atalım.

search_form örneğinin, hedefi ve formu gönderme yöntemini ayarlamak için eylem ve yöntem özniteliklerini kullanmaya dayalı olduğunu hatırlayın. Ayrıca search_form örneğinin özel gönder düğmesinin otomatik davranışına dayandığını unutmayın. Öte yandan, slambook örneği doğrudan başvuru sürecine dahil olur:

İlk olarak, formda ne eylem ne de yöntem tanımlıdır.

İkincisi, gönder düğmesinin Dart'ta bir tıklama işleyicisi vardır.

Üçüncüsü, tıklama işleyicisi, gönder düğmesinin otomatik davranışını geçersiz kılar

Son olarak form verileri Dart kütüphaneleri kullanılarak sunucuya gönderilir.

Slambook örneğindeki form, özel bir öğeyle temsil edilir tute-slambook-formu aşağıdaki HTML koduyla temsil edilir:

Eylem ve yöntem özniteliklerinin yokluğuna dikkat edin. Bunun yerine, gönder düğmesinin davranışı Dart'taki düğme tıklama işleyicisinde tanımlanır. Aşağıda, bir gönder düğmesi oluşturan ve onu bir Dart işleyicisi ile ilişkilendiren HTML kodu bulunmaktadır.

Ve sendForm () düğmesinin kodu, işleyicinin kendisine tıklayın:

İşleyici kodunun her bir öğesine bir göz atalım

Standart bir işleyiciyi iptal etme

Bu etkinlik niteliksiz eylem ve yöntem gönder düğmesi, slambook örneğinde gerekmeyen otomatik davranışı içerir. Bu nedenle, işleyici kodunun ilk satırı, varsayılan düğme davranışını geçersiz kılmak için e.preventDefault () öğesini çağırır.

Void sendForm (Event e) (e.preventDefault (); // Varsayılan gönderimi yapmayın. ...)

POST isteği oluşturma ve gönderme

Sonraki kod parçası bir nesne oluşturur HttpTalebi... Bu kod, bir POST isteği ayarlamak ve göndermek için kullanılan bir HttpRequest nesnesini başlatmak için new kullanır. HttpRequest sınıfı, URL'lere normal GET isteklerini kullanabilmeniz ve gönderebilmeniz için karşılık gelen bir getString () işlevine sahiptir.

Sonraki satır, HttpRequest nesnesine adı verilen bir geri çağırma işlevi sağlar. onData sunucudan bir yanıt alındığında çağrılır. onData () işlev bildiriminin ayrıntılarına daha sonra bakacağız.

Önemli: İsteği göndermeden önce geri arama işlevini kaydetmelisiniz!

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

Son olarak işlev, form verilerini sunucuya bir JSON dizesi olarak gönderir. Bazen veriler parçalar halinde gönderilir. Ancak bu örnek, tek seferde veri göndermek için yeterince küçüktür. Bu istek eşzamansızdır, bu nedenle send() yöntemi istek gönderilir gönderilmez tamamlanır.

Sunucudan yanıt bekleniyor

HttpRequest nesnesi sunucuyla konuşur. Alanı kullanarak durumu alabilirsiniz hazırDurum HttpRequest nesnesi. Hazır durumu beş farklı değer alabilir: gönderilmedi, açıldı, alınan başlıklar, yükleniyor ve tamamlandı. Hazır durumu değiştiğinde, HttpRequest bir olayı başlatır ve onData() geri çağırma işlevi çağrılır.

Olay işleyicisinin kayıtlı olduğu kod satırını geri çağırın onReadyStateChange:

Request.onReadyStateChange.listen (onData);

Listen() yöntemi için gerekli olan tek argüman, imzalı bir geri çağırma işlevidir: geçersiz onData (T)... listen () yöntemi, hata işleyici gibi üç ek argüman tanımlamanıza da izin verir.

OnData () geri çağırma işlevi aşağıdadır:

Void onData (_) (if (request.readyState == HttpRequest.DONE && request.status == 200) (// Veri kaydedildi TAMAM. ServerResponse = "Sunucu Sez:" + request.responseText;) else if (request.readyState == HttpRequest.DONE && request.status == 0) (// Durum 0 ... büyük olasılıkla sunucu "çalışmıyor. ServerResponse =" Sunucu yok ";))

Koddaki ilk adım, isteğin başarıyla tamamlanıp tamamlanmadığıdır. Evet ise, yanıtın içeriği adlı satıra yerleştirilir. Sunucu cevabı bu, slambook uygulamasının textarea değerine bağlıdır. Dize değiştirildiğinde, kullanıcı arayüzü otomatik olarak yenilenecek ve kullanıcıya bir mesaj görüntülenecektir.

İstek bir hata ile tamamlanırsa, program şurada görüntülenecektir: Sunucu cevabı kullanıcıya gösterilecek bir hata mesajı.

Formdan veri sıfırlama

Sıfırlama düğmesi, varsayılan olarak bu forma girilen değerleri temizleyen özel bir HTML giriş öğesidir. Bunun yerine butonun form değerlerini orijinal değerlerine sıfırlamasını istiyoruz. Bu nedenle, sıfırlama düğmesinin tıklama işleyicisinin otomatik davranışı geçersiz kılması ve verileri açıkça doldurması gerekir.

Void resetForm (Event e) (e.preventDefault (); FavoriteThings ["kittens"] = false; FavoriteThings ["raindrops"] = false; FavoriteThings ["eldivenler"] = false; FavoriteThings ["kettles"] = false; theData ["firstName"] = ""; theData ["favoriteQuote"] = ""; theData ["favoriteColor"] = "#FFFFFF"; theData ["birthday"] = "2013-01-01"; theData ["volume "] =" 0 "; theData [" catOrDog "] =" cat "; theData [" music "] = 0; theData [" zombies "] = false; serverResponse =" Veri sıfırlama. ";)

Sunucu tarafı oluşturma ve bağlantı noktası dinleme

Şimdi adı verilen sunucu tarafına bir göz atalım. slambook sunucusu, slambook istemci uygulamasından gönderilen isteğe bir HTTP yanıtı döndürür. Arka uç kodu, [JSON Web Hizmetleri Oluşturmak için Dart Kullanma (#) başlıklı makaleye dayanmaktadır.

Sunucu, yerel makinede 4040 numaralı bağlantı noktasını dinler ve yalnızca POST ve SEÇENEK isteklerini işler. Her iki istek türü de erişime izin vermek için CORS başlıklarını kullanır. POST istekleri için sunucu, istekten aldığı JSON verilerini içeren kısa bir onay mesajı döndürür.

Şimdi koda bir göz atalım.

Slambookserver uygulamasının ana () işlevi aşağıda tam olarak gösterilmiştir. HttpServer sınıfını kullanan slambookserver uygulaması, üst düzey işlevi çağırdıktan sonra yerel makinede 4040 numaralı bağlantı noktasını dinlemeye başlar. bağlamak()

Son HOST = "127.0.0.1"; son PORT = 4040; void main () (HttpServer.bind (HOST, PORT) .then (gotMessage, onError: printError);)

bind () işlevi, gelecekte değeri alabileceğiniz bir vadeli işlem döndürür (daha fazla bilgi bir dakika içinde mevcut olacaktır). Sonra () işlevi, iki geri arama işlevini bir gelecek olarak kaydeder. Futures değerleri aldığında ilk işlev gotMessage () çağrılır. İkinci baskı hatası bir bağlantı girişimi başarısız olduğunda çağrılır. Örneğin, başka bir program o bağlantı noktasını dinliyorsa, bir hata oluşabilir.

Her tür işlev isteğini işlemek için istekleri filtreleme ve diğer yöntemleri çağırma varMesaj() aşağıda.

Void gotMessage (_server) (_server.listen ((HttpRequest request) (switch (request.method)) ("POST" durumu: handlePost (istek); break; case "OPTIONS": handleOptions (istek); break; varsayılan: defaultHandler) ( request);)), onError: printError); // Listen fail.print ("http: // $ HOST: $ PORT");)

GET gibi diğer istek türlerini işlemek için, yalnızca daha fazla değer ekleyebilirsiniz. durumÖrneğin durum 'GET'.

Gelecekler hakkında biraz.

POST ve OPTIONS isteklerini işlemek için koda girmeden önce vadeli işlemlere hızlıca bir göz atalım.

Vadeli işlemler, gelecekte bir süre değer elde etmenin bir yolunu temsil eder. Bir programın veri beklerken engellemesini önlemek için, örneğin bir değer sağlamak için uzun bir hesaplama gerektiğinde veya bir değerin G / Ç kullanılarak okunması veya alınması gerekiyorsa, vadeli işlemleri kullanırsınız.

Futures döndüren bir fonksiyon çağrıldığında iki şey olur.

İşlev yürütme için kuyruğa alınır ve hemen bitmemiş vadeli işlem nesnesini döndürür.

Daha sonra değer alındığında, vadeli işlem nesnesi alınan değerle veya bir hata ile çıkar.

Futures tarafından döndürülen değeri elde etmek için yöntemi kullanın. sonra() bir geri arama kaydetmek için.

Bu örnekte, hem ön uç hem de arka uç, istek göndermek ve uygun yanıtları almak için vadeli işlemleri kullanır. İstemci-sunucu programları neredeyse her zaman iletişim ve diğer asenkron G / Ç biçimleri için gelecekleri kullanır.

SEÇENEKLER İstek İşleme

sınıfı kullanma HttpTalebi, slambook istemci uygulaması, kullanıcı gönder düğmesine tıkladığında istek gönderir. Bu makalenin önceki bölümlerinde kodu gördünüz.

İstemci ve sunucu, uygulamalar arasında yaygın olan farklı kökenlere sahipse, POST'tan önce bir ön istek gönderilir. Hangi isteklere genel olarak izin verildiğini belirlemek için ön istek öncelikle bir SEÇENEKLER isteği içermelidir. HttpRequest sınıfı, OPTIONS öncesi istekleri otomatik olarak işler. Bunun için artık istemci tarafı kodu yazmanıza gerek yok.

Sunucu, ana isteği almadan önce bir ön SEÇENEKLER isteği alır. İşte SEÇENEK isteklerini işleyen slambookserver uygulama kodu.

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

Bu kod şunları yapar:

İstemciye yanıt gönderen sunucuyla ilgilenen bir HttpResponse nesnesi alır

Erişim kontrolü için CORS başlıkları ekler

Konsola bir mesaj yazdırır

Cevabın içeriği olmadığını gösteren işaretler

İstemciye gönderilecek yanıtı tamamlar.

Bir istemci bir istek aldığında, CORS başlığı, POST isteklerinin kabul edileceğini bildirir.

CORS başlıklarını yapılandırma

Sunucu uygulaması, CORS yanıtına SEÇENEKLER ve POST istekleri için başlıklar eklemek için aşağıdaki işlevi kullanır. İşlev, sunucu yanıtına üç başlık ekler Giriş kontrolu(HttpResponse yanıtına dahildir).

Void addCorsHeaders (HttpResponse res) (res.headers.add ("Erişim Kontrolü-İzin Verme-Kökeni", "*,"); res.headers.add ("Erişim Kontrolü-İzin Verme Yöntemleri", "POST, SEÇENEKLER" ); res.headers.add ("Erişim-Kontrol-İzin Ver-Üstbilgileri", "Origin, X-Requested-With, Content-Type, Kabul Et");)

CORS başlığının ilk iki satırı, herhangi bir kaynaktan POST ve OPTIONS isteklerine izin verir. Üçüncüsü, POST isteklerinin türünü ve sunucunun yalnızca belirli başlıklarla istekleri kabul etmesine izin verdiği SEÇENEKLERİ tanımlar.

POST isteklerinin işlenmesi

İşte istemci POST isteklerini işleyen bir fonksiyon.

Void handlePost (HttpRequest req) (HttpResponse res = req.response; print ("$ (req.method): $ (req.uri.path)"); addCorsHeaders (res); req.listen ((List) tampon) (// Verileri client.res.write'a geri döndür ("Veriler için teşekkürler. Dediğini duydum:"); res.write (new String.fromCharCodes (buffer)); res.close ();), onError: printError); )

OPTIONS isteği gibi, slambookserver istekten HTTP yanıt nesnesini alır, konsola bir mesaj yazdırır ve yanıta CORS başlıkları ekler.

Ardından, bu kod müşterinin POST isteğinden gelen verileri dinler. Eğer herşey data hazır, geri arama fonksiyonu çağrılır. Bu fonksiyon aynı yere yazılır. İşlev bağımsız değişkeni, tüm verileri içeren bir sayı listesidir. Her sayı, UTF-16 karakteri olarak gösterilebilen bir kodla temsil edilir. Ancak bunun için endişelenmenize gerek yok, çünkü sadece yöntemi çağırabilirsiniz. String.fromCharCodes normal bir dizeye dönüştürmek için.

HttpResponse nesnesi, sunucunun verileri istemciye geri göndermek için kullanabileceği veri akışlarını yönetir. Geri arama işlevinin içinde, slambookserver bu akışa bir dize olarak mesajları ve ham verileri yazar. Daha karmaşık sunucular bu verilerle bir şeyler yapacak, örneğin bunları sunucuda depolayacak, işleyecek ve hatta banka hesabınızdan para çekecek.

Akış kapatıldığında, HttpResponse nesnesi istemciye veri gönderir.

Slambook örneği istemci/sunucu uygulaması, kendi istemci/sunucu uygulamanız için bir başlangıç ​​noktası veya kendi uygulamalarınızı nasıl oluşturacağınıza dair bir örnek olarak hizmet edebilir.

İşte istemci tarafının yapması gerekenlere bir örnek.

Kullanıcı verilerini toplamak için formları kullanın.

Bireysel veri öğeleri için giriş alanlarını formlarınıza yerleştirin.

Form verilerini Dart koduyla senkronize tutmak için geri bildirim için Polimer kullanın.

Verileri doğrudan gönder (form özellikleri eylemi ve yöntemi)

Veya programlı olarak (gönder düğmesinin varsayılan Dart kodu davranışını geçersiz kılar)

HttpRequest nesnesinden bir sunucu yanıt nesnesi oluşturun.

Ve işte sunucunun yapması gerekenler.

Sunucuyu yapılandırmak ve bağlantı noktasını dinlemek için HttpServer'ı kullanın.

İşlem yanıtları.

Her isteğe izin vermek için CORS başlıklarını kullanın.

İsteğe verilen yanıt HttpResponse kullanır.

Futures kullanarak verileri eşzamansız olarak işleyin.

Verileri geri yazmak için akışları kullanın.

Bu kaynakların çoğu, istemciler ve sunucular yazmak için destek sağlayan Dart kitaplıklarına dayanmaktadır. İki HttpRequest sınıfı olduğunu unutmayın: biri dart: html(müşteriler için) ve ikinci dart: io(sunucular için).

Polimer kullanarak iki yönlü veri bağlama

Slambook örneği, geri bildirim için Polimer, Dart değişkenleriyle giriş öğesi değerleri kullanır. Kullanıcı giriş öğesinin değerini değiştirirse, Dart kodundaki ilişkili değişken otomatik olarak değişir. Veya Dart kodunda değer değişirse, ilişkili özel öğe nesnesi otomatik olarak güncellenir. Özel öğelerin tanımlanmasıyla ilgili makale, veri bağlama ve Polimer hakkında daha fazla ayrıntı sağlayacaktır.

Bu örnek ayrıca giriş öğeleri için işlevleri engellemek ve işlemek için bir olay işleme bildirimi kullanır.

Slambook örneğinde, yeni HTML5 öğeleri de dahil olmak üzere çeşitli girdi öğeleri için çift yönlü veri bağlamanın nasıl kullanıldığını görebilirsiniz. Bu tablo, Polimer ile kullanabileceğiniz tüm çift yönlü nitelikleri bir araya getirir:

Özellik kullanımı değer herhangi bir giriş öğesinde

Bağlanmak değer herhangi bir girdi öğesi üzerinde çalışır ve bir değeri Dart dizesiyle ilişkilendirir. Bu örnek kullanır değer zaman damgası, metin giriş kutusu, renk seçici, tarih seçici ve aralık seçici için.

(Etraftaki bazı kodların, örneğin kodun daha fazla okunabilirliği için kaldırıldı)

Dart kodunda adlı bir sözlük veri form verilerini içerir. Sözlük nesne kodu ile vurgulanır @gözlemlenebilir ve aramalar gözlemlenebilir () bağlama için.

Sözlük, anahtarın bir dize olduğu her giriş öğesi için anahtar/değer çiftlerini içerir. İle ilişkili öğelerin değerleri değer dizelerdir. HTML, Dart'ta adlarını (tanımlayıcılarını) kullanan sözlük öğelerini ifade eder. Örneğin, bir renk seçicinin değeri, theData ['favoriRenk'].

Bir açılır menüde selectedIndex'i kullanma

eleman bir veya daha fazla öğe içerir , ancak varsayılan olarak bir seferde yalnızca biri seçilebilir. Bir öğenin seçimi genellikle bir açılır liste olarak bildirilir. niteliğini kullanabilirsiniz seçiliIndex tamsayı türündeki bir Dart değişkenini bir açılır listeyle ilişkilendirmek için. Sayı, seçilen öğenin dizinini görüntüler. Endeks 0'dan başlar.

kullanım kontrol onay kutularında

niteliğini kullanabilirsiniz kontrol boole değişkeni Dart, ayrı bir onay kutusuyla. Burada, her bir onay kutusu ayrı bir boole değişkeni ile ilişkilendirilir.

İlgili Makaleler

Android akıllı telefon nasıl güvenlik kamerasına dönüştürülür

Çince klavye neye benziyor (geçmiş ve fotoğraflar)

Avatarların psikolojideki değeri

Avatarların psikolojideki değeri

MS Word'de bir harf nasıl vurgulanır

Bir kişinin avatarı ne anlama gelir?

En son makaleler

• 

  2021-11-11 12:38:28

  Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?
• 

  2021-11-11 12:38:28

  Bir sosyal ağdaki bir avatar sahibi hakkında ne söyleyebilir?
• 

  2021-11-11 12:38:28

  Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?

Popüler Makaleler

• 

  Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:

• 

  Havai iletişim ağı için destek seçimi

• 

  AC katener tasarımı ve hesaplanması

• 

  Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları

• 

  mcs51 ailesinin mikrodenetleyicileri

Editörün Seçimi

• 2021-11-06 10:20:40
  Delphi programlama ortamı

  Delphi görsel programlama sistemi, geniş bir kullanıcı yelpazesi arasında çok popülerdir: sıradan insanlardan sisteme ...

• 2021-11-06 10:20:40
  Mikrodenetleyiciler MCS-51: yazılım modeli, yapısı, talimatları

  UDC 681.5, 681.325.5 (075.8) BBK 32.973.202-018.2 i 73 Shcherbina A.N. Bilgisayar makineleri, sistemleri ve ağları. Mikrodenetleyiciler ve mikroişlemciler ...

• 2021-11-06 10:20:40
  Kodlama teorisi. Kodlama türleri. Kodlama teorisinin doğuşu Kodlama yöntemlerinin sınıflandırılması

  "Bu kursun amacı sizi teknik geleceğiniz için hazırlamaktır." Merhaba, Habr. "Siz ve işiniz" harika makalesini hatırlayın (+219, 2442 yer imi, ...

• 2021-11-06 10:20:40
  Geri Besleme Kaydırma Kayıtları Doğrusal Geri Besleme Kaydırma Kaydı c

  Doğrusal bir geri besleme kaydırma kaydı (LFSR), değeri ... olan bir bit sözcük kaydırma kaydıdır.

• 2021-11-01 11:09:32
  Sörf ve otomatik sörften nasıl para kazanılır?

  Sörften kazanç: sörf özellikleri + 5 avantaj ve dezavantaj + otomatik sörf için 3 özel program + 5 popüler hizmet ...

rzdoro.ru

• Demir
• Windows 10
• Tarama
• Windows 7
• Windows XP
• Yazıcı Sürücüleri
• dizüstü bilgisayarlar
• Windows 8
• Ses videosu
• gadget'lar
• Çeşitli
• Linux