Αποστολή δεδομένων από τη φόρμα post php. Φόρμα για αποστολή δεδομένων σε PHP (POST, GET)

Για να οργανώσετε τη μεταφορά δεδομένων στον διακομιστή χρησιμοποιώντας μια φόρμα, θα χρειαστεί να εφαρμόσετε μια φόρμα HTML στην οποία οι επισκέπτες του ιστότοπου θα εισαγάγουν τις πληροφορίες και τον κώδικα PHP τους, σκοπός της οποίας είναι η αποδοχή και η επεξεργασία των δεδομένων που λαμβάνονται στον διακομιστή.

Φόρμα υποβολής δεδομένων HTML

Η φόρμα στη σελίδα σχηματίζεται από ετικέτες

, μέσα στο οποίο τοποθετούνται οι ετικέτες πεδίων εισαγωγής πληροφορίες κειμένου, ετικέτες για ειδικά στοιχεία (για παράδειγμα, σύνθετο πλαίσιο), ετικέτες για το πεδίο επιλογής και μεταφόρτωση αρχείου.

* Για την HTML5 είναι επίσης δυνατό να τοποθετήσετε ετικέτες πεδίων φόρμας όχι μέσα σε ετικέτες φόρμας, αλλά οπουδήποτε στη σελίδα. Σε αυτήν την περίπτωση, για κάθε τέτοιο πεδίο πρέπει να καθορίσετε το χαρακτηριστικό "form" για να καθορίσετε με ποια φόρμα υποβολής θα πρέπει να αλληλεπιδράσει.

Ετσι, απλούστερη μορφήη αποστολή μπορεί να περιέχει τον ακόλουθο κωδικό:

Στοιχεία φόρμας και οι παράμετροί τους:

action="myform.php"– το χαρακτηριστικό «action» καθορίζει ποιο αρχείο php θα επεξεργαστεί τα αποσταλμένα δεδομένα. Σε αυτό το παράδειγμα, τα δεδομένα θα σταλούν στο αρχείο "myform.php", που βρίσκεται στον ίδιο κατάλογο με τη σελίδα με τη φόρμα. Εάν αυτό το χαρακτηριστικό δεν προσδιορίζεται ρητά, τα δεδομένα της φόρμας θα σταλούν στη διεύθυνση σελίδας της ίδιας της φόρμας.

μέθοδος = "ανάρτηση"– η παράμετρος της μεθόδου καθορίζει τη μέθοδο μεταφοράς Δεδομένα POSTή GET. Περισσότερες λεπτομέρειες σχετικά με αυτό στο άρθρο "Διαφορές μεταξύ των μεθόδων POST και GET". Εάν δεν προσδιορίσετε ρητά το χαρακτηριστικό, η μέθοδος GET θα χρησιμοποιηθεί από προεπιλογή.

Κείμενο "Τιμή Α:"Και "Τιμή Β:"προστίθεται μόνο για λόγους σχεδιασμού και σαφήνειας της φόρμας για τον χρήστη. Δεν είναι απαραίτητο να το προσθέσετε για τη μεταφορά δεδομένων, αλλά για να καταστεί σαφές στον χρήστη τι πρέπει να εισάγει, αξίζει να το υποδείξετε.

Ετικέτες χρησιμοποιούνται για να σχηματίσουν διάφορα στοιχεία ελέγχου φόρμας.

type = "κείμενο"– το χαρακτηριστικό "type" καθορίζει τον τύπο του πεδίου. Ανάλογα με τον τύπο που καθορίζεται, το εμφάνισηστοιχείο και ο σκοπός του. Η τιμή του χαρακτηριστικού "text" υποδεικνύει ότι το στοιχείο θα εμφανίζεται στο πρόγραμμα περιήγησης ως πεδίο κειμένου μιας γραμμής όπου ο χρήστης μπορεί να εισαγάγει τη δική του συμβολοσειρά.

όνομα = "δεδομένα 1"– το χαρακτηριστικό «όνομα» υποδηλώνει το όνομα, ή μάλλον το ευρετήριο των δεδομένων στον πίνακα που έλαβε ο διακομιστής. Αυτή είναι μια απαιτούμενη παράμετρος, μέσω της οποίας ο χειριστής PHP μπορεί στη συνέχεια να έχει πρόσβαση στην τιμή που έχει περάσει. Το όνομα μπορεί να επιλεγεί αυθαίρετα, ωστόσο, είναι πιο βολικό όταν αυτή η τιμή έχει κάποιο σαφές νόημα.

πληκτρολογήστε "υποβολή"– ετικέτα με αυτήν την τιμή της παραμέτρου "τύπος" θα εμφανίζεται στη σελίδα ως κουμπί. Στην πραγματικότητα, μπορείτε να κάνετε χωρίς κουμπί στη φόρμα. Αν, για παράδειγμα, η φόρμα έχει πεδία κειμένου, τότε η αποστολή μπορεί να γίνει πατώντας απλά το «Enter» στο πληκτρολόγιο. Αλλά η ύπαρξη ενός κουμπιού κάνει τη φόρμα πιο κατανοητή.

value="Υποβολή" !}– σε αυτήν την περίπτωση (για type="submit") ορίζει μόνο την ετικέτα στο κουμπί. Για παράδειγμα, για type="text", αυτό θα είναι το κείμενο που θα εμφανίζεται στο πεδίο κειμένου.

Ως αποτέλεσμα, στη σελίδα αυτός ο κώδικας θα μοιάζει κάπως έτσι:

Κάνοντας κλικ στο κουμπί, τα δεδομένα θα σταλούν στο καθορισμένη σελίδα, και εάν υπάρχει και λειτουργεί σωστά, θα γίνει επεξεργασία των δεδομένων.

Επεξεργασία δεδομένων που αποστέλλονται με μορφή HTML σε PHP

Τα δεδομένα που αποστέλλονται με τον τρόπο που περιγράφεται τοποθετούνται στους υπερσφαιρικούς πίνακες $_POST, $_GET και $_REQUEST. Το $_POST ή το $_GET θα περιέχει δεδομένα ανάλογα με τη μέθοδο που χρησιμοποιείται για την αποστολή τους. Το $_REQUEST περιέχει δεδομένα που αποστέλλονται με οποιαδήποτε από τις καθορισμένες μεθόδους.

Οι $_POST, οι $_GET και οι $_REQUEST είναι συσχετιστικοί πίνακες των οποίων τα πεδία ευρετηρίου συμπίπτουν με τα χαρακτηριστικά "όνομα" των ετικετών . Αντίστοιχα, για να εργαστείτε με δεδομένα στο αρχείο myform.php, μπορείτε να εκχωρήσετε μεταβλητές τιμέςστοιχεία ενός τέτοιου πίνακα, καθορίζοντας το όνομα του πεδίου ως ευρετήριο:

// για τη μέθοδο GET
$a = $_GET[ "data1" ];
$b = $_GET[ "data2" ];

// για τη μέθοδο POST
$a = $_POST[ "data1" ];
$b = $_POST[ "data2" ];

// για οποιαδήποτε μέθοδο
$a = $_ΑΙΤΗΣΗ[ "data1" ];
$b = $_ΑΙΤΗΣΗ[ "data2" ];

Έλεγχος συμπλήρωσης πεδίων φόρμας

Μερικές φορές, κατά τη λήψη δεδομένων, πρέπει να ελέγξετε εάν ο χρήστης έχει υποβάλει μια κενή φόρμα. Μπορείτε να χρησιμοποιήσετε τη συνάρτηση κενού για αυτό.

εάν (κενό ($_REQUEST["data1" ])) (
ηχώ "Το πεδίο δεν έχει συμπληρωθεί";
} αλλού(
ηχώ "Το πεδίο έχει συμπληρωθεί";
$a = $_ΑΙΤΗΣΗ[ "data1" ];
}

Συνήθως αυτή η λύση είναι επαρκής. Εάν πρέπει να εισαγάγετε κείμενο, θα είναι σαφές εάν έχει εισαχθεί ή όχι. Ωστόσο, εάν ο χρήστης εισαγάγει σκόπιμα μηδέν για λόγους υπολογισμού, η κενή συνάρτηση θα δείξει ότι δεν υπάρχει τιμή. Επομένως, για τέτοιες περιπτώσεις είναι καλύτερο να χρησιμοποιήσετε τη συνάρτηση isset. Θα ελέγξει ρητά εάν η τιμή δίνεται ή όχι.

if (isset ($_REQUEST["data1" ])) (
ηχώ "Το πεδίο έχει συμπληρωθεί";
$a = $_ΑΙΤΗΣΗ[ "data1" ];
} αλλού(
ηχώ "Το πεδίο δεν έχει συμπληρωθεί";
}

Μία από τις πιο δημοφιλείς λειτουργίες στον ιστότοπο είναι η αίτηση ή η φόρμα παραγγελίας, τα δεδομένα από την οποία αποστέλλονται μέσω email στον ιδιοκτήτη του ιστότοπου. Κατά κανόνα, τέτοιες φόρμες είναι απλές και αποτελούνται από δύο ή τρία πεδία για την εισαγωγή δεδομένων. Πώς να δημιουργήσετε μια τέτοια φόρμα παραγγελίας; Αυτό απαιτεί τη χρήση της γλώσσας Σήμανση HTMLκαι γλώσσα Προγραμματισμός PHP.

Η ίδια η γλώσσα σήμανσης HTML είναι απλή, απλά πρέπει να καταλάβετε πώς και πού να τοποθετήσετε ορισμένες ετικέτες. Με τη γλώσσα προγραμματισμού PHP, τα πράγματα είναι λίγο πιο περίπλοκα.

Δεν είναι δύσκολο για έναν προγραμματιστή να δημιουργήσει μια τέτοια φόρμα, αλλά HTML στον σχεδιαστή διάταξηςΚάποιες ενέργειες μπορεί να φαίνονται δύσκολες.

Δημιουργήστε μια φόρμα υποβολής δεδομένων σε html

Η πρώτη γραμμή θα είναι η εξής

Αυτό είναι ένα πολύ σημαντικό στοιχείο της φόρμας. Σε αυτό υποδεικνύουμε πώς θα μεταφερθούν τα δεδομένα και σε ποιο αρχείο. Σε αυτή την περίπτωση όλα μεταφέρονται Μέθοδος POSTαρχείο send.php. Το πρόγραμμα σε αυτό το αρχείο πρέπει αναλόγως να λάβει τα δεδομένα, να περιέχονται στον πίνακα αναρτήσεων και να τα στείλει στο καθορισμένο emailδιεύθυνση.

Ας επιστρέψουμε στη φόρμα. Η δεύτερη γραμμή θα περιέχει ένα πεδίο για την εισαγωγή του πλήρους ονόματός σας. Έχει τον παρακάτω κωδικό:

Ο τύπος της φόρμας είναι κείμενο, δηλαδή ο χρήστης θα μπορεί να εισάγει ή να αντιγράψει κείμενο εδώ από το πληκτρολόγιο. Η παράμετρος name περιέχει το όνομα της φόρμας. Σε αυτήν την περίπτωση, με αυτό το όνομα θα μεταδοθούν όλα όσα ο χρήστης εισήγαγε σε αυτό το πεδίο. Η παράμετρος κράτησης θέσης καθορίζει τι θα γραφεί σε αυτό το πεδίο ως επεξήγηση.

Επόμενη γραμμή:

Εδώ, σχεδόν όλα είναι ίδια, αλλά το όνομα του πεδίου είναι email και η εξήγηση είναι ότι ο χρήστης εισάγει τη διεύθυνση email του σε αυτή τη φόρμα.

Η επόμενη γραμμή θα είναι το κουμπί "αποστολή":

Και η τελευταία γραμμή στη φόρμα θα είναι η ετικέτα

Τώρα ας τα βάλουμε όλα μαζί.

Τώρα ας κάνουμε τα πεδία στη μορφή υποχρεωτικά. Έχουμε τον παρακάτω κωδικό:

Δημιουργήστε ένα αρχείο που δέχεται δεδομένα από τη φόρμα HTML

Αυτό θα είναι ένα αρχείο που ονομάζεται send.php

Στο αρχείο, στο πρώτο στάδιο, πρέπει να αποδεχτείτε δεδομένα από τον πίνακα αναρτήσεων. Για να γίνει αυτό, δημιουργούμε δύο μεταβλητές:

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

Τα ονόματα των μεταβλητών στην PHP προηγούνται από ένα σύμβολο $ και ένα ερωτηματικό τοποθετείται στο τέλος κάθε γραμμής. Το $_POST είναι ένας πίνακας στον οποίο αποστέλλονται δεδομένα από τη φόρμα. Στη φόρμα html, η μέθοδος αποστολής καθορίζεται ως μέθοδος = "post". Έτσι, λαμβάνονται δύο μεταβλητές από html φόρμες. Για να προστατέψετε τον ιστότοπό σας, πρέπει να περάσετε αυτές τις μεταβλητές μέσα από πολλά φίλτρα - συναρτήσεις php.

Η πρώτη συνάρτηση θα μετατρέψει όλους τους χαρακτήρες που ο χρήστης θα προσπαθήσει να προσθέσει στη φόρμα:

Σε αυτή την περίπτωση, δεν δημιουργούνται νέες μεταβλητές στην php, αλλά χρησιμοποιούνται οι υπάρχουσες. Αυτό που θα κάνει το φίλτρο είναι να μεταμορφώσει τον χαρακτήρα "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

Η δεύτερη συνάρτηση αποκωδικοποιεί το url εάν ο χρήστης προσπαθήσει να το προσθέσει στη φόρμα.

$fio = urldcode($fio);
$email = urldcode($email);

Με την τρίτη συνάρτηση θα αφαιρέσουμε κενά από την αρχή και το τέλος της γραμμής, εάν υπάρχουν:

$fio = trim($fio);
$email = trim($email);

Υπάρχουν και άλλες λειτουργίες που σας επιτρέπουν να φιλτράρετε μεταβλητές php. Η χρήση τους εξαρτάται από το πόσο ανησυχείτε ότι ένας εισβολέας θα προσπαθήσει να προσθέσει κώδικα προγράμματος σε αυτήν τη φόρμα υποβολής email html.

Επικύρωση δεδομένων που μεταφέρονται από φόρμα HTML σε αρχείο PHP

Για να ελέγξετε εάν αυτός ο κωδικός λειτουργεί και εάν μεταφέρονται δεδομένα, μπορείτε απλώς να τον εμφανίσετε στην οθόνη χρησιμοποιώντας τη λειτουργία echo:

ηχώ $fio;
ηχώ"
";
ηχώ $fio;

Η δεύτερη γραμμή εδώ χρειάζεται για να διαχωρίσει την έξοδο των μεταβλητών php σε διαφορετικές γραμμές.

Αποστολή ληφθέντων δεδομένων από μια φόρμα HTML σε email με χρήση PHP

Για να στείλετε δεδομένα μέσω email, πρέπει να χρησιμοποιήσετε τη λειτουργία αλληλογραφίας στην PHP.

mail("σε ποια διεύθυνση να σταλεί", "θέμα της επιστολής", "Μήνυμα (σώμα της επιστολής)", "Από: από ποιο email αποστέλλεται η επιστολή \r\n");

Για παράδειγμα, πρέπει να στείλετε δεδομένα στο email του κατόχου ή του διαχειριστή του ιστότοπου [email προστατευμένο].

Το θέμα της επιστολής πρέπει να είναι σαφές και το μήνυμα της επιστολής πρέπει να περιέχει αυτό που ο χρήστης καθόρισε στη φόρμα HTML.

ταχυδρομείο(" [email προστατευμένο]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email προστατευμένο]\r\n");

Είναι απαραίτητο να προσθέσετε μια συνθήκη που θα ελέγχει εάν η φόρμα στάλθηκε με χρήση PHP στην καθορισμένη διεύθυνση email.

αν (ταχυδρομείο(" [email προστατευμένο]", "Παραγγελία από τον ιστότοπο", "Ονοματεπώνυμο:".$fio.". E-mail: ".$email ,"From: [email προστατευμένο]\r\n"))
{
echo "το μήνυμα εστάλη με επιτυχία"?
) άλλο (
}

Έτσι, ο κώδικας προγράμματος του αρχείου send.php, που θα στέλνει δεδομένα φόρμας HTML στο email, θα μοιάζει με αυτό:

$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldcode($fio);
$email = urldcode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//ηχώ"
";
//echo $email;
αν (ταχυδρομείο(" [email προστατευμένο]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email προστατευμένο]\r\n"))
( echo "το μήνυμα εστάλη με επιτυχία"?
) άλλο (
echo "Παρουσιάστηκαν σφάλματα κατά την αποστολή του μηνύματος"
}?>

Τρεις γραμμές για να ελέγξετε εάν τα δεδομένα μεταφέρονται στο αρχείο σχολιάζονται. Εάν είναι απαραίτητο, μπορούν να αφαιρεθούν, καθώς χρειάζονταν μόνο για τον εντοπισμό σφαλμάτων.

Τοποθετούμε τον κώδικα HTML και PHP για την υποβολή της φόρμας σε ένα αρχείο

Στα σχόλια αυτού του άρθρου, πολλοί άνθρωποι ρωτούν πώς να βεβαιωθείτε ότι τόσο η φόρμα HTML όσο και ο κώδικας PHP για την αποστολή δεδομένων σε email βρίσκονται σε ένα αρχείο και όχι σε δύο.

Για να υλοποιήσετε αυτήν την εργασία, πρέπει να τοποθετήσετε τον κώδικα HTML της φόρμας στο αρχείο send.php και να προσθέσετε μια συνθήκη που θα ελέγχει την παρουσία μεταβλητών στον πίνακα POST (αυτός ο πίνακας αποστέλλεται από τη φόρμα). Δηλαδή, εάν οι μεταβλητές στον πίνακα δεν υπάρχουν, τότε πρέπει να δείξετε στον χρήστη τη φόρμα. Διαφορετικά, θα πρέπει να λάβετε δεδομένα από τη συστοιχία και να τα στείλετε στον παραλήπτη.

Ας δούμε πώς να αλλάξετε τον κώδικα PHP στο αρχείο send.php:

Έντυπο αίτησης από τον ιστότοπο

//ελέγξτε εάν υπάρχουν μεταβλητές στον πίνακα POST
if(!isset($_POST["fio"]) και !isset($_POST["email"]))(
?>

) άλλο (
//εμφάνιση της φόρμας
$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldcode($fio);
$email = urldcode($email);
$fio = trim($fio);
$email = trim($email);
αν (ταχυδρομείο(" [email προστατευμένο]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email προστατευμένο]\r\n"))(
echo "Το μήνυμα εστάλη με επιτυχία"
) άλλο (
echo "Παρουσιάστηκαν σφάλματα κατά την αποστολή του μηνύματος"
}
}
?>

Ελέγχουμε την ύπαρξη μεταβλητής στον πίνακα POST με τη συνάρτηση isset() PHP. Ένα θαυμαστικό πριν από αυτή τη συνάρτηση σε μια συνθήκη σημαίνει άρνηση. Δηλαδή, εάν η μεταβλητή δεν υπάρχει, τότε πρέπει να δείξουμε τη μορφή μας. Αν δεν είχα βάλει ένα θαυμαστικό, η συνθήκη θα σήμαινε κυριολεκτικά «αν υπάρχει, τότε δείξε τη φόρμα». Και αυτό είναι λάθος στην περίπτωσή μας. Φυσικά, μπορείτε να το μετονομάσετε σε index.php. Εάν μετονομάσετε το αρχείο, μην ξεχάσετε να μετονομάσετε το όνομα του αρχείου στη γραμμή

. Η φόρμα πρέπει να συνδέεται με την ίδια σελίδα, για παράδειγμα index.php. Πρόσθεσα τον τίτλο της σελίδας στον κώδικα.

Συνήθη σφάλματα που παρουσιάζονται κατά την υποβολή μιας φόρμας PHP από έναν ιστότοπο

Το πρώτο, ίσως το πιο δημοφιλές λάθος, είναι όταν βλέπετε μια κενή λευκή σελίδα χωρίς μηνύματα. Αυτό σημαίνει ότι κάνατε σφάλμα στον κώδικα της σελίδας. Πρέπει να ενεργοποιήσετε την εμφάνιση όλων των σφαλμάτων στην PHP και μετά θα δείτε πού έγινε το σφάλμα. Προσθήκη στον κωδικό:

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

Το αρχείο send.php πρέπει να εκτελείται μόνο στον διακομιστή, διαφορετικά ο κώδικας απλά δεν θα λειτουργήσει. Συνιστάται να μην είναι τοπικός διακομιστής, καθώς δεν είναι πάντα ρυθμισμένος για αποστολή δεδομένων σε εξωτερικό διακομιστή αλληλογραφίας. Εάν εκτελείτε τον κώδικα όχι στον διακομιστή, τότε ο κώδικας PHP θα εμφανιστεί απευθείας στη σελίδα.

Επομένως, για σωστή λειτουργία, προτείνω να τοποθετήσετε το αρχείο send.php στη φιλοξενία του ιστότοπου. Κατά κανόνα, όλα είναι ήδη ρυθμισμένα εκεί.

Ένα άλλο συνηθισμένο λάθος είναι όταν εμφανίζεται η ειδοποίηση «Το μήνυμα εστάλη επιτυχώς», αλλά το γράμμα δεν φθάνει στο ταχυδρομείο. Σε αυτήν την περίπτωση, πρέπει να ελέγξετε προσεκτικά τη γραμμή:

αν (ταχυδρομείο(" [email προστατευμένο]", "Παραγγελία από τον ιστότοπο", "Ονοματεπώνυμο:".$fio.". E-mail: ".$email ,"From: [email προστατευμένο]\r\n"))

Αντί για [email προστατευμένο] πρέπει να υπάρχει μια διεύθυνση email στην οποία θα πρέπει να σταλεί η επιστολή, αλλά αντ' αυτού[email προστατευμένο] πρέπει να είναι υπάρχον email για αυτόν τον ιστότοπο. Για παράδειγμα, για έναν ιστότοπο αυτό θα είναι . Μόνο σε αυτή την περίπτωση θα σταλεί επιστολή με τα στοιχεία από τη φόρμα.

Λοιπόν, φίλοι. Αυτό είναι το τελευταίο βίντεο στην ενότητα για την εκμάθηση φορμών HTML.

Στο τελευταίο μάθημα βίντεο, εξετάσαμε τις διαφορές μεταξύ των μεθόδων GET και POST για την αποστολή δεδομένων. Και δημιουργήσαμε ένα αρχείο που έχει σχεδιαστεί για να επεξεργάζεται δεδομένα από μια φόρμα HTML. Και για να ολοκληρώσουμε τελικά τη μελέτη των εντύπων, πρέπει απλώς να μάθουμε πώς να συλλέγουμε και να στέλνουμε δεδομένα από τη φόρμα.

Σε αυτό το βίντεο θα μιλήσουμε για τον χειριστή δεδομένων φόρμας, που είναι ακριβώς αυτό που χρειάζεται για τη συλλογή δεδομένων από τα πεδία φόρμας και στη συνέχεια την επεξεργασία τους. Σε αυτό το βίντεο θα μάθουμε όχι μόνο πώς να συλλέγουμε δεδομένα από πεδία, αλλά και πώς να τα στέλνουμε μέσω email. Δεν θα υπάρχουν ειδικές λειτουργίες επεξεργασίας δεδομένων και παρόμοια. Απλώς θα χρησιμοποιήσουμε την απλούστερη επιλογή για τη συλλογή και την αποστολή δεδομένων. Θα στείλουμε τα δεδομένα στο E-mail που θα υποδείξουμε στον χειριστή. Αξίζει να θυμάστε εδώ ότι ο χειριστής είναι ένα αρχείο σε μορφή php. Και μιας και μελετάμε HTML, θα μιλήσουμε πολύ σύντομα για την PHP. Και απλώς σκεφτείτε ένα συγκεκριμένο παράδειγμα αποστολής δεδομένων μέσω ηλεκτρονικού ταχυδρομείου.

Διαχειριστής φορμών.

Όπως προανέφερα, πρόκειται για ένα αρχείο σε μορφή PHP, το οποίο, χρησιμοποιώντας διάφορες συναρτήσεις, μεταβλητές και καθολικούς πίνακες, θα μπορεί να συλλέξει δεδομένα από τη φόρμα και να τα στείλει στο γραμματοκιβώτιό μας. Θα εξετάσουμε την απλούστερη και πιο πρωτόγονη έκδοση του χειριστή φορμών. Δεν θα κάνει κανέναν έλεγχο πεδίου ή κάτι παρόμοιο. Το μόνο πράγμα που θα ελέγξουμε σε αυτό το βίντεο μάθημα είναι αν η επιστολή με τα δεδομένα της φόρμας στάλθηκε στο email μας ή κάτι πήγε στραβά.

Αποστολή δεδομένων μέσω e-mail.

Ο επεξεργαστής δεδομένων είναι ένας μάλλον μικρός κώδικας PHP που θα λάβει όλα τα δεδομένα από τα πεδία της φόρμας, θα τα επεξεργαστεί και θα μας τα στείλει μέσω email.

Για να στείλουμε δεδομένα φόρμας στο email, θα χρησιμοποιήσουμε τη λειτουργία αλληλογραφίας. Χρησιμοποιώντας τη συνάρτηση, μπορούμε να καθορίσουμε το email στο οποίο θα αποστέλλονται όλα τα δεδομένα, το θέμα της επιστολής και το ίδιο το μήνυμα, το οποίο θα αποτελείται από τα δεδομένα που συλλέγονται από τη φόρμα.

Με απλά λόγια. Αυτό είναι σε αυτό το μάθημα βίντεο. Θα εξετάσουμε πώς να δημιουργήσουμε μια φόρμα σχολίων σε έναν ιστότοπο και να την κάνουμε να λειτουργήσει. Και όταν κάποιος επισκέπτης θέλει να μας γράψει κάτι, θα λάβουμε το μήνυμά του μέσω email. Είναι όλα πολύ απλά στην πραγματικότητα. Απλώς περάστε από την ενότητα για την εκμάθηση φορμών HTML και παρακολουθήστε αυτό το βίντεο για να μάθετε πώς να τα κάνετε όλα αυτά στον ιστότοπό σας.

Μάθημα βίντεο: Διαχειριστής φορμών. Αποστολή δεδομένων μέσω e-mail.

Ο κατάλογος HTML και άλλα υλικά μπορούν και πρέπει να ληφθούν!

Στο επόμενο εκπαιδευτικό βίντεο θα ξεκινήσουμε μια νέα ενότητα για τη δημιουργία πινάκων σε HTML. Και θα μάθουμε

Η χρήση των μεθόδων GET και POST στην PHP είναι δύσκολο να υπερεκτιμηθεί, καθώς αυτές οι μέθοδοι βρίσκονται σχεδόν σε κάθε ιστότοπο. Πριν μελετήσετε το υλικό που περιγράφεται παρακάτω, σας συμβουλεύω να εξοικειωθείτε με την ετικέτα html . Ας δούμε αναλυτικά καθεμία από αυτές τις μεθόδους.

Μέθοδος GET

Η μέθοδος GET χρησιμοποιεί μια συμβολοσειρά URL για τη μεταφορά δεδομένων. Μπορεί να έχετε παρατηρήσει μεγάλες και ασαφείς διευθύνσεις URL. Για παράδειγμα: function.php?login=Alex&email=dezyakin. Σε αυτήν την περίπτωση, τα δεδομένα υποβάλλονται σε επεξεργασία στο function.php. Μετά το ερωτηματικό "?" υπάρχει μια λίστα με περασμένες παραμέτρους (οι παράμετροι διαχωρίζονται με "&") με τιμές: στην παράμετρο σύνδεσης εκχωρείται η τιμή Alex και στη μεταβλητή email εκχωρείται η τιμή dezyakin. Τα δεδομένα θα αποθηκευτούν στον υπερσφαιρικό πίνακα $_GET. Ένα παράδειγμα χρήσης της μεθόδου GET παρουσιάζεται παρακάτω:

Σύνδεση: E-mail: Χρησιμοποιώντας τον υπερσφαιρικό πίνακα $_GET, εμφανίζουμε τις αποδεκτές τιμές:*/ ηχώ"
login = ". $_GET["login"] ; echo "
email = ". $_GET["email"] ; ?>

Παρατηρήστε πώς διαβάζουμε τιμές από τον υπερσφαιρικό πίνακα $_GET: $_GET["variable_name"]. Στο παράδειγμά μας, τα ονόματα των μεταβλητών δηλώθηκαν με τη μορφή (όνομα=σύνδεση και όνομα=email).

Συμβουλή:
Πριν επεξεργαστείτε τις λαμβανόμενες τιμές, σας συμβουλεύω να ελέγξετε την ύπαρξή τους μέσω συναρτήσεων isset(όνομα_μεταβλητής)ή κενό(όνομα_μεταβλητής)- αυτές οι συναρτήσεις συζητήθηκαν στο προηγούμενο μάθημα 2: μεταβλητές στην PHP. Για παράδειγμα:

έλεγχος ύπαρξης χρησιμοποιώντας το isset: if isset ($_GET["login"] ) ( χειριστές για το χειρισμό της σύνδεσης ... } //ή ελέγξτε την ύπαρξη χρησιμοποιώντας κενό:αν είναι κενό ($_GET["email"] ) ( χειριστές για την επεξεργασία email ... } ?>

Στη φόρμα, μπορείτε να καθορίσετε το όνομα του αρχείου που θα επεξεργαστεί τις μεταφερόμενες τιμές. Αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό action της φόρμας, στο οποίο μπορεί να εκχωρηθεί η διεύθυνση αυτού του αρχείου. Από προεπιλογή, αυτό το αρχείο εκχωρείται στο τρέχον αρχείο (δηλαδή, υποβάλλεται σε επεξεργασία στο αρχείο όπου βρίσκεται η φόρμα). Ακολουθεί ένα παράδειγμα στο οποίο τα δεδομένα από μια φόρμα μεταφέρονται στο αρχείο srcipt.php για επεξεργασία:

Σύνδεση: E-mail:

Το αρχείο script.php πρέπει να περιέχει κάποιο είδος προγράμματος χειρισμού πληροφοριών, διαφορετικά οι πληροφορίες θα περάσουν κενές.

Η μέθοδος GET έχει πολλά μειονεκτήματα:

Ο χρήστης βλέπει τις τιμές των παραμέτρων που έχουν περάσει.
Ο χρήστης μπορεί εύκολα να πλαστογραφήσει τις περασμένες παραμέτρους.
Αβολική μετάδοση δυαδικών πληροφοριών (πρέπει να την κωδικοποιήσετε σε μορφή κειμένου).
Ο όγκος των μεταφερόμενων δεδομένων είναι περιορισμένος - 8 KB.

Λόγω των παραπάνω μειονεκτημάτων, η μέθοδος GET χρησιμοποιείται μόνο σε περιπτώσεις που χρειάζεται να μεταφερθεί μικρός όγκος δεδομένων και τα δεδομένα αυτά δεν ταξινομούνται με κανέναν τρόπο.

Μέθοδος POST

Η μέθοδος POST διαφέρει από το GET στο ότι τα δεδομένα μεταφέρονται σε ιδιωτική μορφή. Υπάρχει ένας υπερσφαιρικός πίνακας $_POST από τον οποίο τα δεδομένα μπορούν να διαβαστούν ως εξής: $_POST["variable_name"]. Για παράδειγμα:

Σύνδεση: "> Email: ">
Χρησιμοποιώντας τον υπερσφαιρικό πίνακα $_POST, εμφανίζουμε τις αποδεκτές τιμές:*/ ηχώ"
login = ". $_POST["login"] ; echo "
email = ". $_POST["email"] ; ?>

Το αποτέλεσμα της εκτέλεσης του παραπάνω κώδικα φαίνεται στο παρακάτω σχήμα:

Όπως μπορείτε να δείτε, η διεύθυνση URL δεν έχει υστερόγραφο, αλλά παρόλα αυτά τα δεδομένα ελήφθησαν και εμφανίστηκαν.

Σημείωμα:
1) Ο όγκος των μεταδιδόμενων τιμών χρησιμοποιώντας τη μέθοδο POST είναι περιορισμένος από προεπιλογή και είναι ίσος με 8 MB. Για να αυξήσετε αυτήν την τιμή, πρέπει να αλλάξετε την οδηγία 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.

Πολλές διαδικτυακές εφαρμογές χρησιμοποιούν φόρμες για τη συλλογή δεδομένων και την αποστολή των δεδομένων στον διακομιστή. Οι φόρμες συνήθως περιέχουν πολλά στοιχεία για την εισαγωγή διαφορετικών τύπων δεδομένων, όπως όνομα, διεύθυνση, ημερομηνία γέννησης, διεύθυνση email και ούτω καθεξής. Η HTML υποστηρίζει διάφορους τύπους στοιχείων εισαγωγής, όπως πεδία κειμένου, κουμπιά επιλογής και πλαίσια ελέγχου. Η HTML5 έχει προσθέσει περισσότερα ειδικά στοιχεία όπως email, πεδίο κωδικού πρόσβασης, επιλογή χρώματος, γραφικά στοιχεία ημερομηνίας και ώρας και ρυθμιστικά.

Το κύριο παράδειγμα αυτού του σεμιναρίου περιέχει μια πλευρά πελάτη και μια πλευρά διακομιστή. Η πλευρά του πελάτη χρησιμοποιεί το Polymer για να παρέχει τη διεπαφή χρήστη (οι φόρμες περιέχουν πολλούς τύπους στοιχείων εισόδου) και τη διεπαφή συγχρονισμού δεδομένων με το Dart. Ο πελάτης και ο διακομιστής επικοινωνούν χρησιμοποιώντας ορισμένες κλάσεις από διάφορες βιβλιοθήκες, συμπεριλαμβανομένων ροών, fluxers, HttpRequest και ούτω καθεξής. Ο διακομιστής χρησιμοποιεί κεφαλίδες CORS για να ενεργοποιήσει αιτήματα μεταξύ τομέων.

ΣχόλιοΑυτό το άρθρο βασίζεται σε όσα διαβάσατε στις ενότητες: Δημιουργία προσαρμοσμένων στοιχείων, χρήση του Futures API, Δυναμική επεξεργασία δεδομένων και θα πρέπει να είστε εξοικειωμένοι με τη βιβλιοθήκη Polymer, τα futures, το JSON και το HttpRequest.

Γενικές πληροφορίες για τα έντυπα

Τα έντυπα έχουν μια ιδιότητα δράση, που είναι η διεύθυνση URL για την υποβολή των δεδομένων της φόρμας και μέθοδοςπου καθορίζει τον τρόπο αποστολής των δεδομένων. Οι ιδιότητες δράσης και μεθόδου μπορούν να οριστούν απευθείας στο HTML ή για μια πιο περίπλοκη περίπτωση ή για να αποκτήσετε περισσότερο έλεγχο, μπορείτε να γράψετε κώδικα Dart και να χρησιμοποιήσετε τις βιβλιοθήκες Dart για να εκθέσετε αυτές τις ιδιότητες μέσω προγραμματισμού

Ας ξεκινήσουμε με τα βασικά, μόνο με τις φόρμες HTML, για να κατανοήσουμε τις ιδιότητες δράσης και μεθόδου των στοιχείων εισόδου και να κατανοήσουμε την τυπική συμπεριφορά των φορμών. Η παρακάτω φόρμα, περικλείεται σε μια ετικέτα

Χρήση των χαρακτηριστικών δράσης και μεθόδου.

Και εδώ είναι ο κώδικας HTML που προσθέτει τρία στοιχεία εισαγωγής στη φόρμα - ένα πεδίο κειμένου, ένα κουμπί υποβολής και ένα πλαίσιο ελέγχου.

Αναζήτηση dartlang.org

Το πλαίσιο ελέγχου είναι τυλιγμένο σε μια ετικέτα ετικέτας, επομένως μπορείτε να κάνετε κλικ τόσο στο ίδιο το πλαίσιο ελέγχου όσο και στον τίτλο για να αλλάξετε την τιμή.

Αυτός ο κώδικας HTML παρέχει κάποια αυτόματη συμπεριφορά.

****

Δημιουργεί ένα ειδικό κουμπί που, όταν πατηθεί, προκαλεί την υποβολή δεδομένων φόρμας. Με βάση τα χαρακτηριστικά δράσης και μεθόδου, το κουμπί δημιουργεί ένα αίτημα και το στέλνει στον διακομιστή στην καθορισμένη διεύθυνση URL.

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

ορίζει το όνομα του πεδίου κειμένου και το όνομα του πλαισίου ελέγχου.

Για στοιχεία μέσα σε μια φόρμα που έχουν καθορισμένο όνομα, παρέχουν δεδομένα για αυτήν τη φόρμα. Σε αυτό το παράδειγμα, η τιμή που παρέχεται από το πεδίο κειμένου είναι η τιμή για qκαι το πλαίσιο ελέγχου παρέχει την τιμή για αναζήτηση ιστότοπου, και οι δύο αυτές παράμετροι αποτελούν μέρος μιας έγκυρης διεύθυνσης URL ερωτήματος Google. Όταν ο χρήστης κάνει κλικ στο κουμπί, το όνομα και η αντίστοιχη τιμή προστίθενται στη διεύθυνση URL αναζήτησης. Ακολουθεί ένα παράδειγμα αιτήματος:

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

Αυτό το παράδειγμα δημιουργήθηκε εξ ολοκλήρου χωρίς κώδικα Dart ή Javascript. Επειδή είναι πολύ απλό, μπορεί να χρησιμοποιήσει την κανονική συμπεριφορά του HTML: δημόσια προσβάσιμη και εύκολη στη διαμόρφωση διευθύνσεων URL, καθώς και ένα κανονικό αίτημα GET. Για φόρμες που περιέχουν μεγάλο όγκο δεδομένων ή για μια διαδικτυακή εφαρμογή που επικοινωνεί με έναν εξειδικευμένο διακομιστή, συνήθως χρειάζεται να επεξεργαστείτε τη φόρμα μέσω προγραμματισμού.

Το ακόλουθο παράδειγμα δείχνει μια πιο περίπλοκη φόρμα που υποβάλλει μέσω προγραμματισμού δεδομένα στον διακομιστή χρησιμοποιώντας ένα αίτημα POST.

Παράδειγμα slambook συγκεκριμένα

Αυτή η ενότητα περιλαμβάνει δύο προγράμματα ως βασικά παραδείγματα.

Το πρώτο είναι ένα κανονικό πρόγραμμα διακομιστή που ονομάζεται slambookserver, το οποίο ακούει στη θύρα 4040 στον τοπικό υπολογιστή και επεξεργάζεται αιτήματα POST και OPTIONS δημιουργώντας μηνύματα και στέλνοντας επιβεβαίωση στον πελάτη. Ο διακομιστής χρησιμοποιεί κεφαλίδες CORS για να επιτρέπει στην εφαρμογή να χρησιμοποιεί αιτήματα που αποστέλλονται από άλλους διακομιστές.

Το δεύτερο είναι ένα πρόγραμμα πελάτη που ονομάζεται slambook, το οποίο παρέχει μια φόρμα στην οποία ο χρήστης μπορεί να εισάγει πληροφορίες. Αυτό το πρόγραμμα χρησιμοποιεί Polymer για διπλή σύνδεση δεδομένων, μεταξύ στοιχείων εισόδου και μεταβλητών 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, ο διακομιστής θα επιστρέψει ένα μήνυμα σφάλματος και θα τερματίσει την εκτέλεση. Το πρόγραμμα σε αυτήν τη σελίδα αναμένει ότι ο διακομιστής slambook θα βρίσκεται στον τοπικό υπολογιστή, τη θύρα 4040. Επομένως, για να λειτουργήσει η εφαρμογή, πρέπει να τερματίσετε μια άλλη διαδικασία και να ξεκινήσετε ξανά τον διακομιστή slambook. Ή μπορείτε να αλλάξετε τον αριθμό θύρας στο πρόγραμμα διακομιστή και πελάτη. Αποφύγετε τη χρήση του 3030 όπως το χρησιμοποιεί το Dart Editor. Στη συνέχεια, εκτελέστε τον πελάτη και τον διακομιστή στον τοπικό σας υπολογιστή.

Το υπόλοιπο αυτού του σεμιναρίου εξηγεί τον κώδικα διακομιστή και πελάτη.

Σχετικά με την πλευρά του πελάτη θα μάθετε για:

Υποβολή δεδομένων φόρμας

Επαναφορά φόρμας

Χρήση Polymer για τη σύνδεση δεδομένων φόρμας

Το τμήμα διακομιστή σε αυτήν την ενότητα θα μιλήσει για:

Κεφαλίδες CORS

Επεξεργασία αιτημάτων OPTIONS

Χειρισμός αιτημάτων POST

Υποβολή δεδομένων φόρμας

Πρώτα απ 'όλα, ας ρίξουμε μια ματιά στον τρόπο αποστολής των δεδομένων στον διακομιστή.

Θυμηθείτε ότι το παράδειγμα αναζήτησης_φόρμας βασίστηκε στη χρήση των χαρακτηριστικών δράσης και μεθόδου για τον καθορισμό του σκοπού και της μεθόδου υποβολής της φόρμας. Θυμηθείτε επίσης ότι το παράδειγμα search_form βασίζεται στην αυτόματη συμπεριφορά ενός ειδικού κουμπιού υποβολής. Από την άλλη πλευρά, το παράδειγμα slambook εμπλέκεται άμεσα στη διαδικασία υποβολής:

Πρώτον, ούτε η δράση ούτε η μέθοδος ορίζονται στη φόρμα

Δεύτερον, το κουμπί υποβολής έχει έναν χειριστή κλικ στο Dart

Τρίτον, το πρόγραμμα χειρισμού κλικ παρακάμπτει την αυτόματη συμπεριφορά του κουμπιού υποβολής

Τέλος, τα δεδομένα της φόρμας αποστέλλονται στον διακομιστή χρησιμοποιώντας τις βιβλιοθήκες Dart

Η φόρμα στο παράδειγμα slambook αντιπροσωπεύεται από ένα προσαρμοσμένο στοιχείο tute-slambook-φόρμα, το οποίο αντιπροσωπεύεται από τον ακόλουθο κώδικα HTML:

Σημειώστε την απουσία χαρακτηριστικών δράσης και μεθόδου. Αντίθετα, η συμπεριφορά του κουμπιού υποβολής ορίζεται στον χειριστή κλικ κουμπιού του Dart. Παρακάτω είναι ο κώδικας HTML που δημιουργεί το κουμπί υποβολής και το συνδέει με τον χειριστή Dart.

…

Και ο ίδιος ο κώδικας για τον χειριστή κλικ του κουμπιού submitForm():

Ας δούμε κάθε στοιχείο του κώδικα χειριστή

Ακυρώστε έναν τυπικό χειριστή

Αυτό είναι ένα γεγονός χωρίς ιδιότητες δράσηΚαι μέθοδος, το κουμπί υποβολής περιέχει αυτόματη συμπεριφορά που δεν απαιτείται στο παράδειγμα slambook. Έτσι, η πρώτη γραμμή του κώδικα χειριστή καλεί την e.preventDefault() για να παρακάμψει την προεπιλεγμένη συμπεριφορά του κουμπιού.

Void submitForm(Event e) ( e.preventDefault(); // Μην κάνετε την προεπιλεγμένη υποβολή. … )

Ρύθμιση και αποστολή αιτήματος POST

Το επόμενο κομμάτι κώδικα δημιουργεί ένα αντικείμενο HttpRequest. Αυτός ο κώδικας χρησιμοποιεί νέο για να δημιουργήσει ένα αντικείμενο HttpRequest, το οποίο χρησιμοποιείται για τη ρύθμιση και αποστολή ενός αιτήματος POST. Η κλάση HttpRequest έχει μια αντίστοιχη συνάρτηση getString() ώστε να μπορείτε να χρησιμοποιείτε και να στέλνετε κανονικά αιτήματα GET σε διευθύνσεις URL.

Η επόμενη γραμμή παρέχει στο αντικείμενο HttpRequest μια συνάρτηση επανάκλησης που ονομάζεται επί Δεδομένων, το οποίο καλείται όταν λαμβάνεται μια απάντηση από τον διακομιστή. Θα δούμε τις λεπτομέρειες της δήλωσης της συνάρτησης onData() αργότερα.

Σπουδαίος: Πρέπει να καταχωρίσετε μια λειτουργία επανάκλησης πριν στείλετε το αίτημα!

Request = 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; ) other if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Η κατάσταση είναι 0...πιθανότατα ο διακομιστής δεν εκτελείται. serverResponse = "Χωρίς διακομιστή"; ) )

Το πρώτο πράγμα που δείχνει ο κωδικός είναι εάν το αίτημα ολοκληρώθηκε με επιτυχία. Εάν ναι, τότε τα περιεχόμενα της απάντησης τοποθετούνται στη γραμμή που ονομάζεται serverResponse, το οποίο συνδέεται με την τιμή του στοιχείου textarea της εφαρμογής slambook. Όταν αλλάζει μια συμβολοσειρά, η διεπαφή χρήστη θα ενημερώνεται αυτόματα και θα εμφανίζεται ένα μήνυμα στον χρήστη.

Εάν το αίτημα εκτελεστεί με σφάλμα, το πρόγραμμα θα βγει στην έξοδο serverResponseμήνυμα σφάλματος που θα εμφανιστεί στον χρήστη.

Επαναφορά δεδομένων φόρμας

Ένα κουμπί επαναφοράς είναι ένα ειδικό στοιχείο εισαγωγής HTML που, από προεπιλογή, διαγράφει τις τιμές που έχουν εισαχθεί σε αυτήν τη φόρμα. Αντίθετα, θέλουμε το κουμπί να επαναφέρει τις τιμές της φόρμας στις αρχικές τους τιμές. Επομένως, το πρόγραμμα χειρισμού κλικ για το κουμπί επαναφοράς πρέπει να παρακάμψει την αυτόματη συμπεριφορά και να συμπληρώσει ρητά τα δεδομένα.

Void resetForm(Event e) ( e.preventDefault(); favoriteThings["kittens"] = false; favoriteThings["raindrops"] = false; favoriteThings["mittens"] = false; favoriteThings["kettles"] = false; theData ["firstName"] = "" theData["favoriteQuote"] = "" theData["favoriteColor"] = "#FFFFFF"] = "2013-01-01"; 0"; theData["catOrDog"] = "cat"; theData["music"] = 0; theData["zombies"] = false; serverResponse = "Επαναφορά δεδομένων."; )

Δημιουργία backend και ακρόαση σε θύρα

Τώρα ας ρίξουμε μια ματιά στο τμήμα διακομιστή, το οποίο ονομάζεται slambookserver, επιστρέφει μια απάντηση HTTP σε ένα αίτημα που αποστέλλεται από την εφαρμογή πελάτη slambook. Ο κώδικας από την πλευρά του διακομιστή βασίζεται στο άρθρο [Χρήση του Dart για τη δημιουργία υπηρεσιών JSON Web (#)

Ο διακομιστής ακούει τη θύρα 4040 στο τοπικό μηχάνημα και επεξεργάζεται μόνο αιτήματα όπως POST και OPTIONS. Και οι δύο τύποι αιτημάτων χρησιμοποιούν κεφαλίδες CORS για να επιτρέπουν την πρόσβαση. Για αιτήματα POST, ο διακομιστής επιστρέφει ένα σύντομο μήνυμα επιβεβαίωσης που περιλαμβάνει τα δεδομένα JSON που έλαβε από το αίτημα.

Ας ρίξουμε μια ματιά στον κώδικα.

Η λειτουργία main() της εφαρμογής slambookserver φαίνεται αναλυτικά παρακάτω. Χρησιμοποιώντας την κλάση 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 request) ( switch (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; default: defaultHandler( αίτημα ) ), onError: printError // Η ακρόαση απέτυχε ("Listening for GET and POST on http://$HOST:$PORT");

Για να χειριστείτε άλλους τύπους αιτημάτων, όπως το GET, μπορείτε απλώς να προσθέσετε περισσότερες τιμές περίπτωσηΓια παράδειγμα υπόθεση "GET".

Λίγα λόγια για το μέλλον.

Ας δούμε λίγο τα συμβόλαια μελλοντικής εκπλήρωσης πριν δούμε τον κώδικα για την επεξεργασία αιτημάτων POST και OPTIONS.

Ένα μέλλον αντιπροσωπεύει έναν τρόπο απόκτησης μιας αξίας κάποια στιγμή στο μέλλον. Χρησιμοποιείτε συμβόλαια μελλοντικής εκπλήρωσης για να αποτρέψετε τον αποκλεισμό ενός προγράμματος ενώ περιμένει για δεδομένα, για παράδειγμα, εάν απαιτείται μεγάλος υπολογισμός για την παροχή μιας τιμής ή εάν η τιμή πρέπει να διαβαστεί ή να ανακτηθεί με χρήση εισόδου/εξόδου.

Όταν καλείται μια συνάρτηση που επιστρέφει μέλλον, δύο πράγματα συμβαίνουν

Η συνάρτηση βρίσκεται στην ουρά για εκτέλεση και επιστρέφει αμέσως ένα ημιτελές αντικείμενο μελλοντικής εκπλήρωσης.

Αργότερα, όταν ληφθεί η τιμή, το αντικείμενο μελλοντικής εκπλήρωσης εξέρχεται με τη ληφθείσα τιμή ή με ένα σφάλμα.

Για να λάβετε την τιμή που επιστρέφεται στο μέλλον, χρησιμοποιήστε τη μέθοδο τότε() για να καταχωρήσετε μια επανάκληση.

Σε αυτό το παράδειγμα, τόσο η πλευρά του πελάτη όσο και του διακομιστή χρησιμοποιούν συμβόλαια μελλοντικής εκπλήρωσης για την αποστολή αιτημάτων και τη λήψη αντίστοιχων απαντήσεων. Τα προγράμματα πελάτη-διακομιστή χρησιμοποιούν σχεδόν πάντα συμβόλαια μελλοντικής εκπλήρωσης για επικοινωνία και άλλους τύπους ασύγχρονων 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; res. κοντά();

Αυτός ο κώδικας κάνει τα εξής:

Λαμβάνει ένα αντικείμενο HttpResponse που φροντίζει ώστε ο διακομιστής να στείλει μια απάντηση στον πελάτη

Προσθέτει κεφαλίδες CORS για έλεγχο πρόσβασης

Εκτυπώνει ένα μήνυμα στην κονσόλα

Σηματοδοτεί ότι η απάντηση δεν έχει περιεχόμενο

Ολοκληρώνει την απάντηση που θα σταλεί στον πελάτη.

Όταν ο πελάτης λαμβάνει ένα αίτημα, η κεφαλίδα CORS σηματοδοτεί ότι τα αιτήματα POST θα γίνουν δεκτά.

Ρύθμιση κεφαλίδων CORS

Η εφαρμογή διακομιστή χρησιμοποιεί την ακόλουθη λειτουργία για να προσθέσει κεφαλίδες για αιτήματα OPTIONS και POST στην απόκριση CORS. Η συνάρτηση προσθέτει τρεις κεφαλίδες στην απόκριση διακομιστή Πρόσβαση-Έλεγχος(τα οποία περιλαμβάνονται στο 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 buffer) ( // Επιστρέψτε τα δεδομένα πίσω στον πελάτη. res.write("Ευχαριστώ για τα δεδομένα. Αυτό άκουσα να λέτε: "); res.write(new String.fromCharCodes(buffer)); res.close () onError: printError); )

Ακριβώς όπως ένα αίτημα OPTIONS, ο slambookserver λαμβάνει το αντικείμενο απόκρισης HTTP από το αίτημα, εκτυπώνει ένα μήνυμα στην κονσόλα και προσθέτει κεφαλίδες CORS στην απάντηση.

Στη συνέχεια, αυτός ο κώδικας ακούει δεδομένα από το αίτημα POST του πελάτη. Αν Ολοιτα δεδομένα είναι έτοιμα, καλείται η συνάρτηση επανάκλησης. Αυτή η συνάρτηση είναι γραμμένη στο ίδιο σημείο. Το όρισμα της συνάρτησης είναι μια λίστα αριθμών που περιλαμβάνει όλα τα δεδομένα. Κάθε αριθμός αντιπροσωπεύεται από έναν κωδικό που μπορεί να αναπαρασταθεί ως χαρακτήρας UTF-16. Αλλά δεν χρειάζεται να ανησυχείτε για αυτό γιατί μπορείτε απλώς να καλέσετε τη μέθοδο String.fromCharCodesγια μετατροπή σε κανονική συμβολοσειρά.

Το αντικείμενο HttpResponse διαχειρίζεται τις ροές δεδομένων που μπορεί να χρησιμοποιήσει ο διακομιστής για να στείλει δεδομένα πίσω στον πελάτη. Μέσα στη λειτουργία επανάκλησης, ο slambookserver εγγράφει μηνύματα και δεδομένα πηγής ως συμβολοσειρά σε αυτήν τη ροή. Οι πιο εξελιγμένοι διακομιστές θα κάνουν κάτι με αυτά τα δεδομένα, όπως την αποθήκευση τους σε έναν διακομιστή, την επεξεργασία τους ή ίσως ακόμη και την ανάληψη χρημάτων από τον τραπεζικό σας λογαριασμό.

Όταν η ροή είναι κλειστή, το αντικείμενο HttpResponse στέλνει δεδομένα στον πελάτη.

Το δείγμα εφαρμογής πελάτη-διακομιστή slambook μπορεί να χρησιμεύσει ως σημείο εκκίνησης για τη δική σας εφαρμογή πελάτη-διακομιστή ή ως παράδειγμα για το πώς να δημιουργήσετε τις δικές σας εφαρμογές.

Εδώ είναι ένα δείγμα του τι πρέπει να κάνει το τμήμα πελάτη.

Χρησιμοποιήστε φόρμες για τη συλλογή δεδομένων χρηστών.

Τοποθετήστε πεδία εισαγωγής στις φόρμες σας για μεμονωμένα στοιχεία δεδομένων.

Χρησιμοποιήστε το Polymer για σχόλια για να διατηρήσετε τα δεδομένα της φόρμας σε συγχρονισμό με τον κώδικα Dart.

Απευθείας αποστολή δεδομένων (ιδιότητες φόρμας ενέργειας και μεθόδου)

Ή μέσω προγραμματισμού (παρακάμπτοντας την προεπιλεγμένη συμπεριφορά του κώδικα κουμπιού υποβολής Dart)

Δημιουργήστε ένα αντικείμενο απόκρισης στον διακομιστή από ένα αντικείμενο HttpRequest.

Αυτό πρέπει να κάνει ο διακομιστής.

Χρησιμοποιήστε το HttpServer για να διαμορφώσετε τον διακομιστή και να ακούσετε στη θύρα.

Διαδικασία απαντήσεων.

Χρησιμοποιήστε κεφαλίδες CORS για να επιτρέψετε κάθε αίτημα.

Η απάντηση στο αίτημα χρησιμοποιεί HttpResponse.

Επεξεργαστείτε δεδομένα ασύγχρονα χρησιμοποιώντας συμβόλαια μελλοντικής εκπλήρωσης.

Χρησιμοποιήστε ροές για να γράψετε δεδομένα στην απάντηση.

Αυτοί οι πόροι βασίζονται κυρίως σε βιβλιοθήκες Dart που παρέχουν υποστήριξη για τη σύνταξη πελατών και διακομιστών. Λάβετε υπόψη ότι υπάρχουν δύο κατηγορίες HttpRequest: μία σε dart:html(για πελάτες) και δεύτερο dart:io(για διακομιστές).

Πόρος	Βιβλιοθήκη	Περιγραφή
HttpRequest	dart:html	Η πλευρά πελάτη του αιτήματος HTTP
HttpRequest	dart:io	Η πλευρά του διακομιστή αιτήματος HTTP
HttpServer	dart:io	Το τμήμα διακομιστή επεξεργάζεται την επικοινωνία HTTP με τον διακομιστή
HttpResponse	dart:io	Το τμήμα διακομιστή που φροντίζει για την αποστολή απαντήσεων στο αίτημα
Ρεύματα	βέλος:ασυγχρονισμός	Ροή δεδομένων
Μελλοντικός	βέλος:ασυγχρονισμός	Ένας τρόπος για να λαμβάνετε δεδομένα ασύγχρονα
JSON	βέλος:μετατροπή	Προεπιλεγμένη δήλωση μετατροπής JSON
Πολυμερές	Πολυμερές	Δεδομένα προσαρμοσμένων στοιχείων που σχετίζονται με ένα πρότυπο

Αμφίδρομη σύνδεση δεδομένων με χρήση Polymer

Το παράδειγμα slambook χρησιμοποιεί το Polymer για την ανάδραση, την τιμή ενός στοιχείου εισόδου με μεταβλητές Dart. Εάν ο χρήστης αλλάξει την τιμή ενός στοιχείου εισόδου, η σχετική μεταβλητή στον κώδικα Dart αλλάζει αυτόματα. Ή εάν η τιμή αλλάξει στον κώδικα Dart, το σχετικό αντικείμενο προσαρμοσμένου στοιχείου ενημερώνεται αυτόματα. Το άρθρο Ορισμός προσαρμοσμένων στοιχείων θα παρέχει περισσότερες λεπτομέρειες σχετικά με τη δέσμευση δεδομένων και το πολυμερές.

Αυτό το παράδειγμα χρησιμοποιεί επίσης μια δήλωση χειριστή συμβάντων για την παρακολούθηση και την επεξεργασία συναρτήσεων για στοιχεία εισόδου.

Χρησιμοποιώντας το παράδειγμα slambook, μπορείτε να δείτε πώς χρησιμοποιείται η αμφίδρομη σύνδεση δεδομένων για διάφορα στοιχεία εισόδου, συμπεριλαμβανομένων των νέων στοιχείων HTML5. Αυτός ο πίνακας συνοψίζει όλα τα αμφίδρομα χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε με το Polymer:

Χρήση χαρακτηριστικών αξίασε οποιοδήποτε στοιχείο εισόδου

Ιδιότης αξίαλειτουργεί σε οποιαδήποτε στοιχεία εισόδου και συσχετίζει μια τιμή με μια συμβολοσειρά Dart. Αυτό το παράδειγμα χρησιμοποιεί αξίαγια πλαίσιο επιλογής, πλαίσιο εισαγωγής κειμένου, επιλογή χρώματος, επιλογή ημερομηνίας και επιλογή εύρους.

(Σημειώστε ότι κάποιος κώδικας γύρω, για παράδειγμα έχει αφαιρεθεί για να γίνει πιο ευανάγνωστος ο κώδικας)

Ένα λεξικό σε κώδικα Dart που ονομάζεται τα Δεδομέναπεριέχει δεδομένα φόρμας. Ο κωδικός αντικειμένου του λεξικού επισημαίνεται χρησιμοποιώντας @αισθητόςκαι κλήσεις toObservable()για δέσιμο.

Το λεξικό περιέχει ζεύγη κλειδιών/τιμών για κάθε στοιχείο εισόδου, όπου το κλειδί είναι μια συμβολοσειρά. Τιμές στοιχείων που σχετίζονται με αξίαείναι χορδές. Η HTML αναφέρεται σε στοιχεία λεξικού που χρησιμοποιούν τα ονόματά τους (αναγνωριστικά) στο Dart. Για παράδειγμα, η τιμή επιλογής χρώματος σχετίζεται με theData['favoriteColor'].

Χρησιμοποιώντας το SelectIndex σε ένα αναπτυσσόμενο μενού

Στοιχείο