Jadi, Kawan. Ini ialah video terakhir dalam bahagian mempelajari borang HTML.
Dalam pelajaran video terakhir, kami melihat perbezaan antara kaedah GET dan POST untuk menghantar data. Dan kami mencipta fail yang direka untuk memproses data daripada borang HTML. Dan untuk akhirnya menyelesaikan kajian borang, kita hanya perlu belajar cara mengumpul dan menghantar data daripada borang.
Dalam video ini kita akan bercakap tentang pengendali data borang, iaitu apa yang diperlukan untuk mengumpul data dari medan borang dan kemudian memprosesnya. Dalam video ini kita akan belajar bukan sahaja cara mengumpul data dari medan, tetapi juga cara menghantarnya melalui e-mel. Tidak akan ada ciri khas pemprosesan data dan seumpamanya. Kami hanya akan menggunakan pilihan paling mudah untuk mengumpul dan menghantar data. Kami akan menghantar data ke E-mel yang akan kami nyatakan dalam pengendali. Perlu diingat di sini bahawa pengendali adalah fail dalam format php. Dan kerana kita sedang belajar HTML, kita akan bercakap tentang PHP dengan ringkas. Dan hanya pertimbangkan contoh khusus untuk menghantar data melalui E-mel.
Pengendali borang.
Seperti yang saya nyatakan di atas, ini ialah fail dalam format PHP, yang, menggunakan pelbagai fungsi, pembolehubah dan tatasusunan global, akan dapat mengumpul data daripada borang dan menghantarnya ke peti mel kami. Kami akan mempertimbangkan versi pengendali borang yang paling mudah dan paling primitif. Ia tidak akan melakukan apa-apa semakan medan atau apa-apa seperti itu. Satu-satunya perkara yang kami akan semak dalam pelajaran video ini ialah sama ada surat dengan data borang telah dihantar ke e-mel kami atau ada masalah.
Menghantar data melalui E-mel.
Pemproses data ialah kod PHP yang agak kecil yang akan menerima semua data dari medan borang, memprosesnya dan menghantarnya kepada kami melalui e-mel.
Untuk menghantar data borang ke e-mel, kami akan menggunakan fungsi mel. Menggunakan fungsi tersebut, kami boleh menentukan e-mel yang mana semua data harus dihantar, subjek surat dan mesej itu sendiri, yang akan terdiri daripada data yang dikumpul daripada borang.
Secara ringkasnya. Itu dalam pelajaran video ini. Kami akan melihat cara membuat borang maklum balas di tapak web dan menjadikannya berfungsi. Dan apabila pelawat ingin menulis sesuatu kepada kami, kami akan menerima mesejnya melalui e-mel. Semuanya agak mudah sebenarnya. Cuma pergi ke bahagian mempelajari borang HTML dan tonton video ini untuk mengetahui cara melakukan semua ini di tapak web anda.
Pelajaran video: Pengendali borang. Menghantar data melalui E-mel.
Direktori HTML dan bahan lain boleh dan harus dimuat turun!
Dalam tutorial video seterusnya kami akan memulakan bahagian baharu untuk mencipta jadual dalam HTML. Dan kita akan mengetahuinya
Untuk mengatur pemindahan data ke pelayan menggunakan borang, anda perlu melaksanakan borang HTML di mana pelawat tapak akan memasukkan maklumat dan kod PHP mereka, yang tujuannya adalah untuk menerima dan memproses data yang diterima pada pelayan.
Borang penyerahan data HTML
Borang pada halaman dibentuk oleh tag
, di dalamnya teg untuk medan untuk memasukkan maklumat teks, teg untuk komponen khas (contohnya, kotak kombo), teg untuk medan pilihan dan muat naik fail diletakkan.* Untuk HTML5 adalah mungkin juga untuk meletakkan teg medan borang bukan di dalam teg borang, tetapi di mana-mana pada halaman. Dalam kes ini, untuk setiap medan tersebut anda perlu menentukan atribut "borang" untuk menentukan borang penyerahan yang mana ia harus berinteraksi.
Jadi, borang penyerahan yang paling mudah mungkin mengandungi kod berikut:
Elemen bentuk dan parameternya:
action="myform.php"– atribut "tindakan" menentukan fail php yang akan memproses data yang dihantar. Dalam contoh ini, data akan dihantar ke fail "myform.php", terletak dalam direktori yang sama dengan halaman dengan borang. Jika atribut ini tidak dinyatakan secara eksplisit, data borang akan dihantar ke alamat halaman borang itu sendiri.
method="post"– parameter kaedah menentukan kaedah pemindahan data POST atau GET. Butiran lanjut tentang perkara ini dalam artikel "Perbezaan antara kaedah POST dan GET". Jika anda tidak menyatakan atribut secara eksplisit, kaedah GET akan digunakan secara lalai.
Teks "Nilai A:" Dan "Nilai B:" ditambah hanya untuk tujuan reka bentuk dan kejelasan borang untuk pengguna. Ia tidak perlu menambah ini untuk memindahkan data, tetapi untuk menjelaskan kepada pengguna apa yang perlu dimasukkan, ia patut ditunjukkan.
Tag digunakan untuk membentuk pelbagai elemen kawalan bentuk.
type="text"– atribut "jenis" menentukan jenis medan. Bergantung pada jenis yang ditentukan, kedua-dua penampilan elemen dan tujuannya berubah. Nilai atribut "teks" menunjukkan bahawa elemen akan dipaparkan dalam penyemak imbas sebagai medan teks satu baris di mana pengguna boleh memasukkan rentetan.
name="data1"– atribut “nama” menunjukkan nama, atau lebih tepatnya indeks data dalam tatasusunan yang diterima oleh pelayan. Ini ialah parameter yang diperlukan, yang mana pengendali PHP kemudiannya boleh mengakses nilai yang diluluskan. Nama itu boleh dipilih sewenang-wenangnya, namun, ia lebih mudah apabila nilai ini mempunyai makna yang jelas.
type="submit"– tag dengan nilai parameter "jenis" ini akan dipaparkan pada halaman sebagai butang. Malah, anda boleh melakukannya tanpa butang pada borang. Jika, sebagai contoh, borang mempunyai medan teks, maka penyerahan boleh dilakukan dengan hanya menekan "Enter" pada papan kekunci. Tetapi mempunyai butang menjadikan borang lebih mudah difahami.
value="Serah" !}– dalam kes ini (untuk jenis="serahkan") ia mentakrifkan hanya label pada butang. Untuk type="text", sebagai contoh, ini akan menjadi teks yang akan dipaparkan dalam medan teks.
Akibatnya, pada halaman kod ini akan kelihatan seperti ini:
Dengan mengklik pada butang, data akan dihantar ke halaman yang ditentukan, dan jika ia wujud dan berfungsi dengan betul, data akan diproses.
Memproses data yang dihantar melalui borang HTML dalam PHP
Data yang dihantar dalam cara yang diterangkan diletakkan dalam tatasusunan superglobal $_POST, $_GET dan $_REQUEST. $_POST atau $_GET akan mengandungi data bergantung pada kaedah yang digunakan untuk menghantarnya. $_REQUEST mengandungi data yang dihantar oleh mana-mana kaedah yang ditentukan.
$_POST, $_GET dan $_REQUEST ialah tatasusunan bersekutu yang medan indeksnya bertepatan dengan atribut "nama" tag . Oleh itu, untuk bekerja dengan data dalam fail myform.php, anda boleh menetapkan nilai elemen tatasusunan sedemikian kepada pembolehubah dengan menentukan nama medan sebagai indeks:
// untuk kaedah GET
$a = $_GET[ "data1" ];
$b = $_GET[ "data2" ];
// untuk kaedah POST
$a = $_POST[ "data1" ];
$b = $_POST[ "data2" ];
// untuk sebarang kaedah
$a = $_REQUEST[ "data1" ];
$b = $_REQUEST[ "data2" ];
Menyemak pengisian medan borang
Kadangkala, apabila menerima data, anda perlu menyemak sama ada pengguna telah menyerahkan borang kosong. Anda boleh menggunakan fungsi kosong untuk ini.
jika (kosong ($_REQUEST["data1" ])) (
bergema "Medan tidak diisi";
} lain (
bergema "Medan telah diisi";
$a = $_REQUEST[ "data1" ];
}
Biasanya penyelesaian ini mencukupi. Jika anda perlu memasukkan teks, ia akan menjadi jelas sama ada ia telah dimasukkan atau tidak. Walau bagaimanapun, jika pengguna sengaja memasukkan sifar untuk tujuan pengiraan, fungsi kosong akan menunjukkan bahawa tiada nilai. Oleh itu, untuk situasi sedemikian adalah lebih baik menggunakan fungsi isset. Ia secara eksplisit akan menyemak sama ada nilai diberikan atau tidak.
jika (isset ($_REQUEST["data1" ])) (
bergema "Medan telah diisi";
$a = $_REQUEST[ "data1" ];
} lain (
bergema "Medan tidak diisi";
}
Kerja makmal 1. Protokol HTTP. Kaedah GET, POST. Borang HTML.
Bahagian teori
Kitaran Hayat Permintaan HTTP
- pelayar membuka sambungan dengan pelayan
- Penyemak imbas menghantar permintaan kepada pelayan untuk menerima halaman
- Pelayan menjana respons (paling kerap kod HTML) kepada penyemak imbas dan menutup sambungan
- Pelayar memproses kod HTML dan memaparkan halaman
Beri perhatian kepada yang ditonjolkan berani. Malah sebelum anda melihat halaman yang diminta pada skrin, sambungan ke pelayan ditutup dan ia telah melupakan anda. Dan apabila anda memasukkan alamat yang berbeza (atau sama), atau klik pada pautan, atau klik pada butang borang HTML, corak yang sama akan berulang lagi.
Jenis kerja ini dipanggil "pelayan pelanggan". Pelanggan dalam kes ini ialah penyemak imbas.
Jadi, sambungan ke pelayan web hanya bertahan beberapa saat (atau pecahan saat) - ini ialah tempoh masa antara mengklik pada pautan (atau jenis permintaan lain) dan halaman mula dipaparkan. Kebanyakan pelayar memaparkan beberapa jenis penunjuk semasa sambungan, contohnya, MS Internet Explorer memaparkan animasi di sudut kanan atas.
Untuk selamanya menyingkirkan persepsi HTTP sebagai "kotak hitam", mari "berpura-pura" menjadi pelayar menggunakan telnet:
- Jom lancarkan telnet ya.ru 80
- Mari masukkan yang berikut dalam tetingkap terminal (jika input tidak dipaparkan, tidak mengapa):
GET / HTTP/1.0[tekan Enter di sini]
Hos: ya.ru[di sini tekan Enter dua kali]
Menekan Enter biasanya sepadan dengan gabungan aksara CR + LF, dilambangkan sebagai \r\n. Notasi ini akan digunakan di bawah.
Kod HTML halaman http://ya.ru/ akan dipaparkan pada skrin. Seperti yang anda lihat, tiada yang rumit.
Kod sumber halaman semasa boleh dilihat dalam hampir mana-mana pelayar dengan memilih "Lihat|Sumber" daripada menu.
Gambar, bingkai - semua ini adalah permintaan tambahan, betul-betul sama. Sebenarnya, dari mana datangnya gambar dalam tetingkap penyemak imbas: apabila menghuraikan (memproses) kod HTML, penyemak imbas menemui teg https://i0.wp.com/ 
.
Cuba:
Telnet www.google.ru 80
DAPATKAN /php/php5ru.png HTTP/1.0\r\n
Hos: ya.ru\r\n\r\n
Perkara yang anda akan lihat jika anda melihat fail png ini dalam penyunting teks akan berkelip pada skrin.
saya-2. Borang HTML. Kaedah untuk menghantar data ke pelayan
Anda mungkin telah menemui borang HTML:
- Masukkan nama anda:
Dengan menyimpan kod ini dalam fail HTML dan melihatnya menggunakan penyemak imbas kegemaran anda, anda akan melihat bentuk HTML biasa:
Masukkan nama anda:
Mari kita lihat lebih dekat pada tag yang digunakan dalam contoh ringkas ini.
Tag , mempunyai tag hujung berpasangan, sebenarnya menetapkan borang. Atributnya adalah pilihan:
- tindakan- menentukan URL (penuh atau relatif) yang dihantar bentuk. Menghantar borang adalah permintaan yang sama kepada pelayan seperti semua yang lain (seperti yang telah saya nyatakan di atas).
Jika atribut ini tidak dinyatakan, kebanyakan penyemak imbas (lebih tepat lagi, semua penyemak imbas yang saya kenali) menghantar borang ke dokumen semasa, iaitu, "kepada dirinya sendiri." Ini adalah trengkas yang mudah, tetapi menurut standard HTML, atribut tindakan diperlukan.
- kaedah - cara menghantar borang. Terdapat dua daripada mereka.
- DAPATKAN- menghantar data borang dalam bar alamat.
Anda mungkin perasan di pelbagai tapak web terdapat "?" di hujung URL. dan data berikut dalam format parameter=nilai. Di sini "parameter" sepadan dengan maksudnya atribut nama elemen bentuk (lihat di bawah tentang teg ), dan "nilai" - kandungan atribut nilai(ia mengandungi, sebagai contoh, input pengguna ke dalam medan teks dengan tag yang sama ).
Sebagai contoh, cuba cari sesuatu dalam Yandex dan perhatikan bar alamat penyemak imbas. Ini adalah kaedah GET. - POS- data borang dihantar ke badan permintaan. Jika tidak sepenuhnya jelas (atau tidak jelas sepenuhnya) apakah ini, jangan risau, kami akan kembali kepada isu ini tidak lama lagi.
Jika atribut kaedah tidak dinyatakan - "GET" tersirat.
Tag - set unsur bentuk, ditakrifkan oleh atribut menaip :
- Maknanya "teks" menentukan medan input teks satu baris
- Maknanya "serahkan" menentukan butang yang, apabila ditekan, menyebabkan menghantar borang ke pelayan
Nilai lain mungkin (dan - bukan satu-satunya teg yang mentakrifkan elemen bentuk), tetapi kita akan melihatnya dalam bab berikut.
Jadi apa yang berlaku apabila kita mengklik "OK"?
- Penyemak imbas melihat elemen yang disertakan dalam borang dan membentuk nama dan atribut nilai daripadanya data bentuk. Katakan nama telah dimasukkan Vasya. Dalam kes ini, data borang adalah name=Vasya&okbutton=OK
- Penyemak imbas mewujudkan sambungan dengan pelayan, menghantar permintaan kepada pelayan untuk dokumen yang dinyatakan dalam atribut tindakan tag
- Pelayan menganalisis permintaan yang diterima, menjana respons, menghantarnya ke penyemak imbas dan menutup sambungan
- Pelayar memaparkan dokumen yang diterima daripada pelayan
Menghantar permintaan yang sama secara manual (menggunakan telnet) kelihatan seperti ini (dengan mengandaikan nama domain tapak ialah www.example.com):
telnet www.example.com 80
DAPATKAN /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
Hos: www.example.com\r\n
\r\n
Seperti yang anda mungkin telah meneka, mengklik butang serah pada borang dengan kaedah serah "DAPATKAN" adalah sama seperti menaip URL yang sepadan (dengan tanda soal dan data borang di hujung) ke dalam bar alamat penyemak imbas: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
Malah, kaedah GET digunakan apabila anda meminta dokumen daripada pelayan dengan hanya memasukkan URLnya atau mengklik pada pautan. menggunakan
Menggunakan atribut tindakan dan kaedah.
Dan inilah kod HTML yang menambah tiga elemen input pada borang - medan teks, butang hantar dan kotak semak.
Kotak pilihan dibalut dengan tag label, jadi anda boleh mengklik kedua-dua kotak pilihan itu sendiri dan tajuk untuk menukar nilai.
Kod HTML ini menyediakan beberapa tingkah laku automatik.
****
Mencipta butang khas yang, apabila diklik, menyebabkan data borang diserahkan. Berdasarkan atribut tindakan dan kaedah, butang menjana permintaan dan menghantarnya ke pelayan pada URL yang ditentukan.
**name=q** **name="sitesearch"**
mentakrifkan nama medan teks dan nama kotak semak.
Untuk elemen dalam borang yang mempunyai nama yang ditentukan, mereka menyediakan data untuk borang tersebut. Dalam contoh ini, nilai yang disediakan oleh medan teks ialah nilai untuk q, dan kotak semak menyediakan nilai untuk carian tapak, kedua-dua parameter ini adalah sebahagian daripada URL pertanyaan Google yang sah. Apabila pengguna mengklik butang, nama dan nilai yang sepadan ditambahkan pada URL carian. Berikut adalah contoh permintaan:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Contoh ini dicipta sepenuhnya tanpa sebarang kod Dart atau Javascript. Kerana ia sangat mudah, ia boleh menggunakan tingkah laku biasa HTML: boleh diakses secara umum dan mudah untuk membentuk URL, serta permintaan GET biasa. Untuk borang yang mengandungi sejumlah besar data, atau untuk aplikasi web yang berkomunikasi dengan pelayan khusus, anda biasanya perlu memproses borang secara pengaturcaraan.
Contoh berikut menunjukkan bentuk yang lebih kompleks yang menyerahkan data secara pemrograman kepada pelayan menggunakan permintaan POST.
Contoh slambook khususnya
Bahagian ini termasuk dua program sebagai contoh asas.
Yang pertama ialah program pelayan biasa yang dipanggil slambookserver, yang mendengar pada port 4040 pada komputer tempatan dan memproses permintaan POST dan OPTIONS dengan menjana mesej dan menghantar pengesahan kepada pelanggan. Pelayan menggunakan pengepala CORS untuk membenarkan aplikasi menggunakan permintaan yang dihantar daripada pelayan lain.
Yang kedua ialah program klien yang dipanggil slambook, yang menyediakan borang di mana pengguna boleh memasukkan maklumat. Program ini menggunakan Polimer untuk pengikatan data berganda, antara elemen input dan pembolehubah Dart. Apabila pengguna mengklik butang, kod Dart menukar data menjadi rentetan JSON, menghantar permintaan OPTIONS untuk mendapatkan kebenaran pelayan, dan kemudian menghantar permintaan POST untuk menghantar data. Apabila permintaan daripada pelayan diterima, ia dipaparkan kepada klien.
Rajah berikut menunjukkan urutan komunikasi antara pelayan dan klien dalam contoh ini.
Cuba ia! Masukkan sebarang data dan klik butang Hantar.
Nota Versi. Aplikasi slambook serasi dengan polimer.dart 0.9.
Permintaan mengembalikan mesej "Tiada pelayan" kerana anda belum memulakan pelayan pada mesin anda. Mari kita betulkan ini.
Memulakan pelayan
Kod sumber program pelayan utama slambookserver.dart boleh dimuat turun daripada contoh tutorial
Jalankan program pelayan dari baris arahan
% dart slambookserver.dart Mendengar untuk GET dan POST di http://127.0.0.1:4040
Sekarang anda boleh cuba lagi untuk menghantar data dari aplikasi slambook di atas.
Komen: Jika beberapa program lain sudah menggunakan port 4040, pelayan akan mengembalikan mesej ralat dan menamatkan pelaksanaan. Program pada halaman ini menjangkakan slambookserver terletak pada mesin tempatan, port 4040. Oleh itu, agar aplikasi berfungsi, anda mesti mematikan proses lain dan memulakan slambookserver semula. Atau anda boleh menukar nombor port dalam program pelayan dan klien. Elakkan menggunakan 3030 kerana Editor Dart menggunakannya. Kemudian jalankan klien dan pelayan pada komputer tempatan anda.
Selebihnya tutorial ini menerangkan kod pelayan dan klien.
Mengenai bahagian pelanggan yang anda akan pelajari tentang:
Menghantar data borang
Tetapkan semula borang
Menggunakan Polimer untuk mengikat data bentuk
Bahagian pelayan dalam bahagian ini akan bercakap tentang:
Tajuk CORS
Memproses permintaan OPTIONS
Mengendalikan permintaan POST
Menghantar data borang
Pertama sekali, mari kita lihat bagaimana data dihantar ke pelayan.
Ingat bahawa contoh borang carian adalah berdasarkan penggunaan atribut tindakan dan kaedah untuk menentukan tujuan dan kaedah untuk menyerahkan borang. Juga ingat bahawa contoh search_form bergantung pada tingkah laku automatik butang serah khas. Sebaliknya, contoh slambook terlibat secara langsung dalam proses penyerahan:
Pertama, tindakan mahupun kaedah tidak ditakrifkan dalam bentuk
Kedua, butang hantar mempunyai pengendali klik dalam Dart
Ketiga, pengendali klik mengatasi tingkah laku automatik butang hantar
Akhir sekali, data borang dihantar ke pelayan menggunakan perpustakaan Dart
Borang dalam contoh slambook diwakili oleh elemen tersuai bentuk tute-slambook, yang diwakili oleh kod HTML berikut:
Perhatikan ketiadaan atribut tindakan dan kaedah. Sebaliknya, kelakuan butang serah ditakrifkan dalam pengendali klik butang Dart. Di bawah ialah kod HTML yang mencipta butang hantar dan mengikatnya kepada pengendali Dart.
Dan kod itu sendiri untuk pengendali klik butang submitForm():
Mari lihat setiap elemen kod pengendali
Batalkan pengendali standard
Ini adalah peristiwa tanpa atribut tindakan Dan kaedah, butang hantar mengandungi tingkah laku automatik yang tidak diperlukan dalam contoh slambook. Oleh itu, baris pertama kod pengendali memanggil e.preventDefault() untuk mengatasi tingkah laku lalai butang.
Void submitForm(Event e) ( e.preventDefault(); // Jangan lakukan serah lalai. … )
Menyediakan dan menghantar permintaan POST
Sekeping kod seterusnya mencipta objek HttpRequest. Kod ini menggunakan baru untuk membuat seketika objek HttpRequest, yang digunakan untuk menyediakan dan menghantar permintaan POST. Kelas HttpRequest mempunyai fungsi getString() yang sepadan supaya anda boleh menggunakan dan menghantar permintaan GET biasa ke URL.
Baris seterusnya menyediakan objek HttpRequest dengan fungsi panggil balik yang dipanggil onData, yang dipanggil apabila respons diterima daripada pelayan. Kami akan melihat butiran pengisytiharan fungsi onData() kemudian.
Penting: Anda mesti mendaftarkan fungsi panggil balik sebelum menghantar permintaan!
Permintaan = new HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());
Akhirnya, fungsi menghantar data borang ke pelayan sebagai rentetan JSON. Kadangkala data dihantar dalam bahagian. Tetapi contoh ini cukup kecil sehingga data dihantar pada satu masa. Permintaan ini tidak segerak, jadi kaedah send() akan selesai sebaik sahaja permintaan dihantar.
Menunggu jawapan daripada pelayan
Objek HttpRequest berkomunikasi dengan pelayan. Anda boleh mendapatkan negeri menggunakan medan readyState objek HttpRequest. Keadaan sedia boleh mengambil lima nilai berbeza: tidak dihantar, terbuka, pengepala diterima, memuatkan dan selesai. Apabila keadaan sedia berubah, HttpRequest menimbulkan acara dan fungsi panggil balik onData() dipanggil.
Mari kita ingat baris kod di mana pengendali acara didaftarkan onReadyStateChange:
Request.onReadyStateChange.listen(onData);
Satu-satunya hujah yang diperlukan untuk kaedah listen() ialah fungsi panggil balik dengan tandatangan: batal padaData(T). Kaedah listen() juga membolehkan anda menentukan tiga argumen tambahan, seperti pengendali ralat.
Di bawah ialah fungsi panggil balik onData():
Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Data disimpan OK. serverResponse = "Server Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Status ialah 0...kemungkinan besar pelayan tidak berjalan. serverResponse = "Tiada pelayan"; ) )
Perkara pertama yang ditunjukkan oleh kod ialah sama ada permintaan itu berjaya diselesaikan. Jika ya, maka kandungan jawapan diletakkan dalam baris yang dinamakan serverResponse, yang terikat pada nilai elemen textarea aplikasi slambook. Apabila baris ditukar, antara muka pengguna akan dikemas kini secara automatik dan mesej akan ditunjukkan kepada pengguna.
Jika permintaan dilaksanakan dengan ralat, atur cara akan dikeluarkan serverResponse mesej ralat yang akan ditunjukkan kepada pengguna.
Menetapkan semula data borang
Butang set semula ialah elemen input HTML khas yang, secara lalai, mengosongkan nilai yang dimasukkan ke dalam borang tersebut. Sebaliknya, kami mahu butang untuk menetapkan semula nilai borang kepada nilai asalnya. Oleh itu, pengendali klik untuk butang set semula perlu mengatasi gelagat automatik dan mengisi data secara eksplisit.
Void resetForm(Event e) ( e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["hujan"] = false; favoriteThings["mittens"] = false; favoriteThings["cerek"] = 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 = "Tetapan semula data."; )
Mencipta bahagian belakang dan mendengar pada port
Sekarang mari kita lihat bahagian pelayan, yang dipanggil slambookserver, ia mengembalikan respons HTTP kepada permintaan yang dihantar daripada aplikasi klien slambook. Kod sebelah pelayan adalah berdasarkan artikel [Menggunakan Dart untuk mencipta perkhidmatan Web JSON (#)
Pelayan mendengar port 4040 pada mesin tempatan dan hanya memproses permintaan seperti POST dan OPTIONS. Kedua-dua jenis permintaan menggunakan pengepala CORS untuk membenarkan akses. Untuk permintaan POST, pelayan mengembalikan mesej pengesahan ringkas yang merangkumi data JSON yang diterima daripada permintaan tersebut.
Mari kita lihat kodnya.
Fungsi utama() bagi aplikasi slambookserver ditunjukkan sepenuhnya di bawah. Menggunakan kelas HttpServer, aplikasi slambookserver mula mendengar pada port 4040 mesin tempatan selepas memanggil fungsi peringkat atas mengikat()
HOST Akhir = "127.0.0.1"; PELABUHAN akhir = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); )
Fungsi bind() mengembalikan masa depan yang boleh digunakan untuk mendapatkan nilai pada masa hadapan (lebih banyak maklumat akan datang dalam satu minit sahaja). Fungsi then() mendaftarkan dua fungsi panggil balik sebagai masa hadapan. Fungsi pertama, gotMessage(), dipanggil apabila masa hadapan menerima nilai. Kedua printError Dipanggil apabila percubaan sambungan gagal. Ralat mungkin berlaku, sebagai contoh, jika program lain sudah mendengar pada port yang sama.
Tapis permintaan dan panggil kaedah yang tinggal untuk mengendalikan setiap jenis permintaan fungsi gotMessage() di bawah.
Void gotMessage(_server) ( _server.listen((HttpRequest request) ( suis (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( request); ) ), onError: printError); // Dengar gagal. print("Mendengar untuk GET dan POST pada http://$HOST:$PORT"); )
Untuk mengendalikan jenis permintaan lain seperti GET, anda boleh menambah lebih banyak nilai kes Sebagai contoh kes 'DAPAT'.
Sedikit tentang masa depan.
Mari kita lihat niaga hadapan sedikit sebelum kita melihat kod untuk mengendalikan permintaan POST dan OPTIONS.
Masa depan mewakili cara untuk mendapatkan nilai pada masa hadapan. Anda menggunakan niaga hadapan untuk menghalang program daripada menyekat semasa ia menunggu data, contohnya jika pengiraan yang panjang diperlukan untuk memberikan nilai, atau jika nilai mesti dibaca atau diambil menggunakan I/O.
Apabila fungsi mengembalikan masa depan dipanggil, dua perkara berlaku
Fungsi ini beratur untuk pelaksanaan dan segera mengembalikan objek niaga hadapan yang tidak lengkap.
Kemudian, apabila nilai diterima, objek niaga hadapan keluar dengan nilai yang diterima atau dengan ralat.
Untuk mendapatkan nilai yang dikembalikan pada masa hadapan, gunakan kaedah kemudian() untuk mendaftarkan panggilan balik.
Dalam contoh ini, kedua-dua pelanggan dan pelayan menggunakan niaga hadapan untuk menghantar permintaan dan menerima respons yang sepadan. Program pelayan pelanggan hampir selalu menggunakan niaga hadapan untuk komunikasi dan jenis I/O tak segerak yang lain.
Mengendalikan permintaan OPTIONS
Menggunakan kelas HttpRequest, aplikasi klien slambook menghantar permintaan apabila pengguna mengklik butang "hantar". Anda melihat kod itu lebih awal dalam artikel ini.
Jika klien dan pelayan adalah asal yang berbeza, yang biasa berlaku dalam aplikasi, permintaan prapenerbangan dihantar sebelum POST. Permintaan awal mesti terlebih dahulu mengandungi permintaan OPTIONS untuk menentukan permintaan yang biasanya dibenarkan. Kelas HttpRequest secara automatik mengendalikan permintaan OPTIONS prapenerbangan. Anda tidak perlu lagi menulis kod sisi klien untuk ini.
Pelayan menerima permintaan OPTIONS awal sebelum menerima permintaan utama. Berikut ialah kod untuk aplikasi slambookserver yang memproses permintaan OPTIONS.
Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. tutup(); )
Kod ini melakukan perkara berikut:
Mendapat objek HttpResponse yang menjaga pelayan menghantar respons kepada klien
Menambah pengepala CORS untuk kawalan akses
Mencetak mesej ke konsol
Memberi isyarat bahawa jawapan itu tiada isi
Melengkapkan respons yang akan dihantar kepada pelanggan.
Apabila pelanggan menerima permintaan, pengepala CORS memberi isyarat bahawa permintaan POST akan diterima.
Menyediakan pengepala CORS
Aplikasi pelayan menggunakan fungsi berikut untuk menambah pengepala untuk permintaan OPTIONS dan POST pada respons CORS. Fungsi ini menambah tiga tajuk pada respons pelayan Kawalan Akses(yang termasuk dalam 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"); )
Dua baris pertama pengepala CORS membenarkan permintaan POST dan OPTIONS dari mana-mana asal. Yang ketiga menentukan jenis permintaan POST dan OPTIONS pelayan membenarkan untuk menerima permintaan hanya dengan pengepala tertentu.
Memproses permintaan POST
Berikut ialah fungsi yang mengendalikan permintaan POST pelanggan.
Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((Senarai
Sama seperti permintaan OPTIONS, slambookserver menerima objek respons HTTP daripada permintaan, mencetak mesej ke konsol dan menambah pengepala CORS pada respons.
Seterusnya, kod ini mendengar data daripada permintaan POST pelanggan. Jika Semua data sedia, fungsi panggil balik dipanggil. Fungsi ini ditulis di tempat yang sama. Argumen fungsi ialah senarai nombor yang merangkumi semua data. Setiap nombor diwakili oleh kod yang boleh diwakili sebagai aksara UTF-16. Tetapi anda tidak perlu risau tentang itu kerana anda boleh memanggil kaedah tersebut String.fromCharCodes untuk menukar kepada rentetan biasa.
Objek HttpResponse menguruskan aliran data yang boleh digunakan oleh pelayan untuk menghantar data kembali kepada klien. Di dalam fungsi panggil balik, slambookserver menulis mesej dan data sumber sebagai rentetan kepada aliran ini. Pelayan yang lebih kompleks akan melakukan sesuatu dengan data ini, seperti menyimpannya pada pelayan, memprosesnya, atau mungkin juga mengeluarkan wang daripada akaun bank anda.
Apabila strim ditutup, objek HttpResponse menghantar data kepada klien.
Contoh aplikasi pelayan pelanggan slambook boleh berfungsi sebagai titik permulaan untuk aplikasi pelayan pelanggan anda sendiri atau sebagai contoh cara membina aplikasi anda sendiri.
Berikut ialah contoh perkara yang harus dilakukan oleh bahagian pelanggan.
Gunakan borang untuk mengumpul data pengguna.
Letakkan medan input pada borang anda untuk item data individu.
Gunakan Polimer untuk maklum balas untuk memastikan data borang segerak dengan kod Dart.
Hantar data secara langsung (sifat bentuk tindakan dan kaedah)
Atau secara pengaturcaraan (mengatasi tingkah laku lalai kod butang hantar Dart)
Buat objek tindak balas pada pelayan daripada objek HttpRequest.
Inilah yang harus dilakukan oleh pelayan.
Gunakan HttpServer untuk mengkonfigurasi pelayan dan mendengar pada port.
Memproses tindak balas.
Gunakan pengepala CORS untuk membenarkan setiap permintaan.
Respons kepada permintaan menggunakan HttpResponse.
Memproses data secara tak segerak menggunakan niaga hadapan.
Gunakan strim untuk menulis data kepada respons.
Sumber ini kebanyakannya berdasarkan perpustakaan Dart yang menyediakan sokongan untuk menulis klien dan pelayan. Sila ambil perhatian bahawa terdapat dua kelas HttpRequest: satu dalam dart:html(untuk pelanggan) dan kedua dart:io(untuk pelayan).
| Sumber | Perpustakaan | Penerangan |
|---|---|---|
| HttpRequest | dart:html | Bahagian pelanggan permintaan HTTP |
| HttpRequest | dart:io | Bahagian pelayan permintaan HTTP |
| HttpServer | dart:io | Bahagian pelayan memproses komunikasi HTTP dengan pelayan |
| HttpResponse | dart:io | Bahagian pelayan yang menjaga penghantaran respons kepada permintaan |
| Aliran | dart:async | Aliran data |
| masa depan | dart:async | Satu cara untuk menerima data secara tidak segerak |
| JSON | dart:menukar | Deklarasi Penukaran JSON lalai |
| Polimer | Polimer | Data unsur tersuai yang dikaitkan dengan templat |
Pengikatan data dua hala menggunakan Polimer
Contoh slambook menggunakan Polimer untuk maklum balas, nilai elemen input dengan pembolehubah Dart. Jika pengguna menukar nilai elemen input, pembolehubah yang berkaitan dalam kod Dart berubah secara automatik. Atau jika nilai berubah dalam kod Dart, objek elemen tersuai yang berkaitan dikemas kini secara automatik. Artikel Mentakrifkan Unsur Tersuai akan memberikan butiran lanjut tentang pengikatan data dan Polimer.
Contoh ini juga menggunakan perisytiharan pengendali peristiwa untuk memintas dan memproses fungsi untuk elemen input.
Menggunakan contoh slambook, anda boleh melihat cara pengikatan data dwiarah digunakan untuk pelbagai elemen input, termasuk elemen HTML5 baharu. Jadual ini meringkaskan semua atribut dwiarah yang boleh anda gunakan dengan Polimer:
Penggunaan Atribut nilai dalam mana-mana elemen input
Atribut nilai berfungsi pada sebarang elemen input dan mengaitkan nilai dengan rentetan Dart. Contoh ini menggunakan nilai untuk kotak tanda, kotak input teks, pemilih warna, pemilih tarikh dan pemilih julat.
(Perhatikan bahawa beberapa kod di sekeliling, sebagai contoh
Kamus dalam kod Dart dipanggil data itu mengandungi data borang. Kod objek kamus diserlahkan menggunakan @boleh diperhatikan dan panggilan toObservable() untuk mengikat.
Kamus mengandungi pasangan kunci/nilai untuk setiap elemen input, dengan kuncinya ialah rentetan. Nilai unsur yang berkaitan dengan nilai adalah rentetan. HTML merujuk kepada elemen kamus menggunakan nama mereka (pengecam) dalam Dart. Sebagai contoh, nilai pemilih warna dikaitkan dengan theData['warna kegemaran'].
Menggunakan selectedIndex dalam menu lungsur
unsur
Penggunaan diperiksa dalam kotak pilihan
Anda boleh menggunakan atribut diperiksa Dart boolean pembolehubah dengan kotak pilihan yang berasingan. Di sini, setiap kotak semak dikaitkan dengan pembolehubah Boolean yang berasingan.
Borang itu sendiri biasanya bertujuan untuk menerima maklumat daripada pengguna untuk menghantarnya selanjutnya ke pelayan, di mana data borang diterima oleh program pengendali. Program sedemikian boleh ditulis dalam mana-mana bahasa pengaturcaraan sebelah pelayan seperti PHP, Perl, dll. Alamat program ditunjukkan dalam atribut tindakan teg
Dalam contoh ini, data borang yang ditunjukkan oleh atribut nama (log masuk dan kata laluan) akan dihantar ke fail di /example/handler.php. Jika atribut tindakan tidak ditentukan, maka pemindahan berlaku ke alamat halaman semasa.
Pemindahan ke pelayan berlaku dalam dua kaedah berbeza: GET dan POST, untuk menetapkan kaedah dalam teg