Πόσες φορές έχετε αντιμετωπίσει το γεγονός ότι εισαγάγατε λανθασμένα δεδομένα, εξαιτίας των οποίων η σελίδα επαναφόρτωσε και διέγραψε εντελώς τους χαρακτήρες που είχαν εισαχθεί στα πεδία. Για να διορθωθεί αυτό, υπάρχει μια αρκετά δημοφιλής προσέγγιση για τη δημιουργία μιας διεπαφής χρήστη και το όνομά της είναι ajax. Εμφανίζεται σε πολλά έργα και χρησιμοποιείται με πολλούς τρόπους.
Αποστολή φόρμας ajax: σύνδεση βιβλιοθηκών
Συμπεριλάβετε τη βιβλιοθήκη jquery στο index.php.
Υπάρχει ένας άλλος τρόπος για να συμπεριλάβετε το jquery σε ένα έγγραφο. Πρέπει να κατεβάσετε τη βιβλιοθήκη από τον επίσημο ιστότοπο του jquery, να την τοποθετήσετε στον σωστό φάκελο και να επικολλήσετε τον σύνδεσμο προς αυτήν ως εξής:
Σύνδεση και ρύθμιση εγγράφων
1. Δημιουργήστε ένα έγγραφο.php στο φάκελο με τον ιστότοπο με οποιοδήποτε όνομα είναι κατάλληλο για εσάς - αυτό θα στείλει τη φόρμα ajax php. Σε αυτό μπορείτε να γράψετε σε ποια μορφή θα εμφανίζεται το κείμενο με το μήνυμα. Για παράδειγμα, form1.php.
2. Στον φάκελο αρχείων javascript, δημιουργήστε ένα αρχείο.js μεοποιοδήποτε βολικό όνομα. Για παράδειγμα, form.js.
3. Συνδέστε αυτόν το φάκελο στο έγγραφό σας.
4. Δημιουργήστε μια φόρμα με τις ακόλουθες παραμέτρους:
Σε αυτό, μην ξεχάσετε να δημιουργήσετε πεδία για την εισαγωγή των δεδομένων σας.
5. Μεταβείτε στο αρχείο form1.php στον κατάλογο με τον ιστότοπο, στον οποίο γράψτε:
Τώρα, κατά την υποβολή της φόρμας, το πρόγραμμα περιήγησης θα εμφανίζει πληροφορίες σχετικά με τα δεδομένα.
Στο ίδιο αρχείο, μπορείτε να γράψετε τι ακριβώς θα εμφανίζεται ή πώς. Μπορείτε επίσης να γράψετε κύκλους ή αλγόριθμους εδώ.
Αποστολή φόρμας ajax jquery
1. Στο αρχείο form.js που δημιουργήθηκε, πρέπει να γράψετε τον κώδικα που είναι υπεύθυνος για τη λειτουργία του αρχείου μετά την πλήρη φόρτωση της σελίδας του ιστότοπου.
$(document).ready(function(){ //Ο επόμενος κωδικός μας θα εκτελεστεί εδώ });
2. Στη συνέχεια, πρέπει να προσαρμόσετε το κουμπί υποβολής. Κάντε τα όλα στο ίδιο αρχείο.
$("φόρμα").submit(function(event) { event.preventDefault(); //ο παρακάτω κώδικας θα γραφτεί εδώ });
Το πρώτο μέρος του κώδικα είναι υπεύθυνο για την επιλογή του στοιχείου στη σελίδα και το δεύτερο είναι υπεύθυνο για την αποτροπή της προεπιλεγμένης ενέργειας.
3. Στη συνέχεια, για παράδειγμα, κάντε μια υποβολή φόρμας ajax σε περίπτωση επιτυχίας.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Ακολουθούν λεπτομερείς περιγραφές για κάθε ρύθμιση.
- τύπος -Αυτός είναι ο τύπος αιτήματος που υποβάλλεται στη φόρμα. δεδομένου ότι κοστίζει POST, ο τύπος αιτήματος θα είναι κατάλληλος·
- αυτό - επιλογή στοιχείου μέσα στην κατασκευή;
- attr - συντομογραφία για έλξη (έλξη), δηλαδή, προσελκύεται μια συγκεκριμένη παράμετρος του επιλεγμένου στόχου (φόρμα),
- url - παράμετρος υπεύθυνη για το πού θα σταλεί το αίτημα. σε αυτήν την περίπτωση, τι γράφεται στις παραμέτρους φόρμας (form1.php);
- data - καθορίζει δεδομένα φόρμας;
- contentType - υπεύθυνος για την αποστολή κεφαλίδων στον διακομιστή. σε αυτήν την περίπτωση δεν χρειάζεται;
- cache - υπεύθυνη για την αποθήκευση της προσωρινής μνήμης του χρήστη;
- processData - υπεύθυνη για τη μετατροπή δεδομένων σε συμβολοσειρά;
- επιτυχία - εμφανίζει το αποτέλεσμα μιας επιτυχημένης υποβολής δεδομένων. Επομένως, εάν η αποστολή δεδομένων ήταν επιτυχής, τότε οι ενέργειες της συνάρτησης εκτελούνται.
4. Ολοκληρώθηκε, τώρα κατά την υποβολή της φόρμας ajax, θα λάβετε δεδομένα χωρίς ανανέωση της σελίδας.
Το αποτέλεσμα μπορεί να αλλάξει χρησιμοποιώντας το αρχείο form1.php, όπου μπορείτε να καθορίσετε τι ακριβώς θα εμφανίζεται ως αποτέλεσμα. Για παράδειγμα, Μπορείτε να πειραματιστείτε και να δημιουργήσετε έναν έλεγχο για την ορθότητα της εισαγωγής ορισμένων δεδομένων: εάν τα δεδομένα δεν είναι σωστά, τότε εμφανίζεται το επιθυμητό μήνυμα, διαφορετικά ανακατευθύνεται στη σωστή σελίδα. Πολλά άλλα πράγματα είναι επίσης δυνατά, ό,τι θέλει η καρδιά σας.
Υπάρχει επίσης ασύγχρονη αποστολή δεδομένων στον διακομιστή. Αυτό συμβαίνει όταν ο χρήστης εισάγει κείμενο και επισημαίνεται αμέσως με κόκκινο χρώμα, υποδεικνύοντας ότι τα δεδομένα που έχουν εισαχθεί δεν είναι σωστά. Σχετικά με αυτόυπάρχουν πολλά εγχειρίδια στο Διαδίκτυο, όπου τα πάντα εξηγούνται ξεκάθαρα και παρουσιάζονται με παραδείγματα.
Συμπέρασμα
Αναμφίβολα, το ajax είναι ένα χρήσιμο εργαλείο στη δημιουργία ιστοσελίδων. Για να δημιουργήσετε σελίδες και διεπαφές υψηλής ποιότητας, είναι απλώς απαραίτητο. Αξίζει να σημειωθεί ότι είναι πολύ σημαντικό να γνωρίζετε το jQuery για να κατανοήσετε πλήρως την εικόνα και τι γράφει ο κώδικας, γιατί μια απλή αντιγραφή-επικόλληση δεν μπορεί πάντα να σας βοηθήσει και να σας μάθει να κατανοείτε τον κώδικα. Αξίζει πάντα να θυμόμαστε ότι οι γλωσσικές εκδόσεις ενημερώνονται και ορισμένες λειτουργίες μπορεί απλώς να εξαφανιστούν. Επομένως, μπορεί να μην είναι όλες οι λύσεις σχετικές, συχνά ο γραπτός κώδικας απλά δεν λειτουργεί ή δεν παράγει το αποτέλεσμα που θα θέλατε να δείτε στην οθόνη σας.
