Πώς να χρησιμοποιήσετε το AJAX για να στείλετε μια φόρμα Web

Διαφήμιση

Μπορεί να έχετε διαβάσει το δικό μας Οδηγός jQuery Ένας βασικός οδηγός για το JQuery για προγραμματιστές JavascriptΕάν είστε προγραμματιστής Javascript, αυτός ο οδηγός για το JQuery θα σας βοηθήσει να ξεκινήσετε την κωδικοποίηση σαν ninja. Διαβάστε περισσότερα , καθώς και το μέρος πέντε των δικών μας Εκμάθηση jQuery στο AJAX Tutorial jQuery (Μέρος 5): AJAX Them All!Καθώς πλησιάζουμε στο τέλος της σειράς mini-tutorial jQuery, είναι καιρός να ρίξουμε μια πιο εμπεριστατωμένη ματιά σε μια από τις πιο χρησιμοποιούμενες λειτουργίες του jQuery. Το AJAX επιτρέπει σε έναν ιστότοπο να επικοινωνεί με ... Διαβάστε περισσότερα , αλλά σήμερα θα σας δείξω πώς να χρησιμοποιήσετε το AJAX για να στέλνετε δυναμικά μια φόρμα ιστού. Το JQuery είναι μακράν ο ευκολότερος τρόπος χρήσης του AJAX, οπότε ελέγξτε το ξεκινώντας το σεμινάριο Tutorial jQuery - Ξεκινώντας: Βασικά στοιχεία & ΕπιλογείςΤην περασμένη εβδομάδα, μίλησα για το πόσο σημαντικό είναι το jQuery για οποιονδήποτε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βρώσουμε τα χέρια μας με κάποιο κώδικα και να μάθουμε πώς ...

Διαβάστε περισσότερα αν είστε αρχάριος Ας πηδήξουμε ακριβώς μέσα.

Γιατί να χρησιμοποιήσετε το AJAX

Ίσως αναρωτιέστε "Γιατί χρειάζομαι το AJAX;" Η HTML είναι απόλυτα ικανή να υποβάλλει φόρμες και το κάνει με αρκετά ανώδυνο τρόπο. Το AJAX εφαρμόζεται σε μια μεγάλη πλειονότητα ιστοσελίδων και η δημοτικότητά του συνεχίζει να αυξάνεται.

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

• Ελέγχετε τακτικά νέα email.
• Ενημερώστε ένα ζωντανό σκορ ποδοσφαίρου κάθε 30 δευτερόλεπτα.
• Ενημερώστε την τιμή για μια διαδικτυακή δημοπρασία.

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

Το HTML

Πριν ξεκινήσετε, χρειάζεστε μια φόρμα HTML. Εάν δεν γνωρίζετε τι είναι το HTML, διαβάστε τον οδηγό μας πώς να φτιάξετε έναν ιστότοπο για αρχάριους Πώς να δημιουργήσετε έναν ιστότοπο: Για αρχάριουςΣήμερα θα σας καθοδηγήσω στη διαδικασία δημιουργίας ενός πλήρους ιστότοπου από το μηδέν. Μην ανησυχείτε αν αυτό ακούγεται δύσκολο. Θα σας καθοδηγήσω σε αυτό κάθε βήμα. Διαβάστε περισσότερα .

Εδώ είναι το HTML που χρειάζεστε:

 Ονομα: Ηλικία: 

Αυτό το html ορίζει μια φόρμα με μερικά στοιχεία. Παρατηρήστε πώς υπάρχουν δράση και μέθοδος γνωρίσματα. Αυτά καθορίζουν πού και πώς υποβάλλεται η φόρμα. Δεν χρειάζονται όταν χρησιμοποιείτε το AJAX, αλλά είναι καλή ιδέα να τα χρησιμοποιήσετε, καθώς διασφαλίζει ότι οι επισκέπτες του ιστότοπού σας μπορούν να το χρησιμοποιήσουν ακόμη και αν έχουν απενεργοποιήσει τη JavaScript. Αυτή η σελίδα περιλαμβάνει το jQuery που φιλοξενείται από την Google CDN Τι είναι τα CDN και γιατί ο χώρος αποθήκευσης δεν είναι πλέον πρόβλημαΤα CDN καθιστούν το Διαδίκτυο γρήγορο και προσιτές ιστοσελίδες ακόμη και όταν κάνετε κλίμακα σε εκατομμύρια χρήστες. Πρώτον, το εύρος ζώνης κοστίζει χρήματα. όσοι από εμάς με περιορισμένες συμβάσεις το γνωρίζουν πολύ καλά. Όχι μόνο εσείς ... Διαβάστε περισσότερα . ο κεφάλι περιέχει ένα γραφή ετικέτα - εδώ θα γράψετε τον κωδικό σας.

Αυτή η φόρμα μπορεί να φαίνεται λίγο βαρετή αυτήν τη στιγμή, οπότε ίσως θελήσετε να το σκεφτείτε εκμάθηση CSS 5 Βήματα για να μάθεις CSS και να γίνεις Kick-Ass CSS SorcererΤο CSS είναι η πιο σημαντική ιστοσελίδα που έχει αλλάξει την τελευταία δεκαετία και άνοιξε το δρόμο για το διαχωρισμό του στυλ και του περιεχομένου. Με τον σύγχρονο τρόπο, το XHTML ορίζει τη σημασιολογική δομή ... Διαβάστε περισσότερα για να το ζήσω λίγο.

Η JavaScript

Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να υποβάλετε φόρμες με JavaScript. Ο πρώτος και ευκολότερος τρόπος να το κάνετε είναι μέσω του υποβάλλουν μέθοδος:

document.getElementById («myForm»). υποβολή ();

Φυσικά, μπορείτε να στοχεύσετε τη φόρμα με το jQuery αν προτιμάτε - δεν έχει σημασία:

$ ('# myForm'). υποβολή ();

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

Στο μέθοδος χαρακτηριστικό της φόρμας σας, καθορίσατε τον τρόπο υποβολής της φόρμας. Αυτό μπορεί να είναι ΘΕΣΗ ή ΠΑΙΡΝΩ. Αυτό το χαρακτηριστικό δεν χρησιμοποιείται κατά την υποβολή φορμών χρησιμοποιώντας AJAX, αλλά μπορεί να χρησιμοποιηθεί η ίδια μέθοδος.

Μεγάλο μέρος του σύγχρονου ιστού εκτελείται αιτήσεις GET ή POST. Σε γενικές γραμμές, το GET χρησιμοποιείται για την ανάκτηση δεδομένων, ενώ το POST χρησιμοποιείται για την αποστολή δεδομένων (και την επιστροφή μιας απόκρισης). Τα δεδομένα μπορούν να σταλούν με GET, αλλά το POST είναι σχεδόν πάντα η καλύτερη επιλογή - ειδικά για δεδομένα φόρμας. Ίσως έχετε δει προηγούμενα αιτήματα GET - στέλνουν τα δεδομένα που επισυνάπτονται στη διεύθυνση URL:

someebsite.com/index.html; όνομα = Τζο

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

Μέγιστο όριο χαρακτήρων: Υπάρχει ένας μέγιστος αριθμός χαρακτήρων που μπορούν να σταλούν σε ένα url. Ενδέχεται να μην έχετε αρκετά αν προσπαθείτε να στείλετε μεγάλο αριθμό δεδομένων.
Ορατότητα: Οποιοσδήποτε μπορεί να δει τα δεδομένα που αποστέλλονται σε αίτημα GET - δεν είναι καλό για ευαίσθητα δεδομένα όπως κωδικούς πρόσβασης ή δεδομένα φόρμας.

Τα αιτήματα POST λειτουργούν με παρόμοιο τρόπο, μόνο που δεν αποστέλλουν τα δεδομένα στη διεύθυνση URL. Αυτό σημαίνει ότι μπορεί να σταλεί μεγαλύτερη ποσότητα δεδομένων (τα δεδομένα είναι γνωστά ως φορτίο επί πληρωμή), και κάποια ασφάλεια αποκτάται με την μη έκθεση των δεδομένων. Ωστόσο, μπορείτε να έχετε εύκολη πρόσβαση στα δεδομένα, οπότε εξετάστε το Πιστοποιητικό SSL Τι είναι ένα πιστοποιητικό SSL και χρειάζεστε ένα;Η περιήγηση στο Διαδίκτυο μπορεί να είναι τρομακτική όταν εμπλέκονται προσωπικές πληροφορίες. Διαβάστε περισσότερα αν θέλετε απόλυτη ηρεμία.

Είτε χρησιμοποιείται POST ή GET, τα δεδομένα αποστέλλονται κλειδί -> αξία ζευγάρια. Στην παραπάνω διεύθυνση URL, το κλειδί είναι όνομα, και η τιμή είναι Τζο.

Ο καλύτερος τρόπος για να υποβάλετε έντυπα είναι να χρησιμοποιήσετε Ασύγχρονη JavaScript και XML (ΑΪΑΣ). Το JavaScript υποστηρίζει κλήσεις AJAX, αλλά μπορεί να προκαλέσει σύγχυση στη χρήση. Το JQuery εφαρμόζει αυτές τις ίδιες ακριβώς μεθόδους, αλλά το κάνει με έναν εύκολο στη χρήση τρόπο. Μπορείτε να δώσετε εντολή στο πρόγραμμα περιήγησής σας να εκτελέσει ένα αίτημα GET ή POST - κολλήστε στο POST για αυτό το παράδειγμα, αλλά τα αιτήματα GET εκτελούνται με παρόμοιο τρόπο.

Εδώ είναι η σύνταξη:

$ .post ('some / url', $ ('# myForm'). serialize ());

Αυτός ο κωδικός κάνει πολλά πράγματα. Το πρώτο μέρος ($) ενημερώνει το πρόγραμμα περιήγησής σας ότι θέλετε να χρησιμοποιήσετε το jQuery για αυτήν την εργασία. Το δεύτερο μέρος καλεί το Θέση μέθοδος από το jQuery. Πρέπει να περάσετε σε δύο παραμέτρους. Το πρώτο είναι το url για την αποστολή των δεδομένων, ενώ το δεύτερο είναι τα δεδομένα. Μπορεί να βρείτε (ανάλογα με τη διεύθυνση URL στην οποία προσπαθείτε να αποκτήσετε πρόσβαση), ότι τα προγράμματα περιήγησής σας ίδια προέλευση η πολιτική ασφάλειας ενδέχεται να παρεμβαίνει εδώ. Μπορείτε να ενεργοποιήσετε διαμοιρασμός πόρων πολλαπλής προέλευσης για να το ξεπεράσετε, αλλά απλώς επισημαίνετε μια διεύθυνση URL που φιλοξενείται στον ίδιο τομέα με τη σελίδα σας είναι αρκετή.

Η δεύτερη παράμετρος καλεί το jQuery σειριοποιώ μέθοδο στη φόρμα σας. Αυτή η μέθοδος αποκτά πρόσβαση σε όλα τα δεδομένα από τη φόρμα σας και τα προετοιμάζει για μετάδοση - τα σειριοποιεί.

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

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

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

$ (έγγραφο) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); επιστροφή ψευδής? });

Αυτός ο κωδικός κάνει πολλά πράγματα. Όταν υποβληθεί η φόρμα σας, το πρόγραμμα περιήγησής σας έρχεται και εκτελεί τον κωδικό σας πρώτα. Στη συνέχεια, ο κωδικός σας υποβάλλει τα δεδομένα της φόρμας χρησιμοποιώντας το AJAX. Το τελευταίο βήμα που απαιτείται είναι να αποτρέψετε την υποβολή της αρχικής φόρμας - το έχετε ήδη κάνει με το AJAX, οπότε δεν θέλετε να συμβεί ξανά!

Εάν θέλετε να εκτελέσετε κάποια άλλη εργασία μόλις ολοκληρωθεί το AJAX (ή ίσως ακόμη και να επιστρέψετε ένα μήνυμα κατάστασης), πρέπει να χρησιμοποιήσετε ένα επανάκληση. Το JQuery το καθιστά πολύ εύκολο στη χρήση - απλώς περάστε μια λειτουργία ως μια άλλη παράμετρος όπως αυτή:

$ .post ('url', $ ('# myForm'). serialize (), function (αποτέλεσμα) {console.log (αποτέλεσμα); }

ο αποτέλεσμα Το όρισμα περιέχει τυχόν δεδομένα που επιστρέφονται από τη διεύθυνση url στα οποία εστάλησαν τα δεδομένα. Μπορείτε εύκολα να απαντήσετε σε αυτά τα δεδομένα:

εάν (αποτέλεσμα == 'επιτυχία') {// κάντε κάποια εργασία. } αλλιώς {// κάντε κάποια άλλη εργασία. }

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

Μάθατε νέα κόλπα σήμερα; Πώς χρησιμοποιείτε το AJAX με φόρμες; Πείτε μας τις σκέψεις σας στα παρακάτω σχόλια!

Συντελεστές εικόνας: vectorfusionart / Shutterstock