Αυτό το ιστολόγιο θα συζητήσει τις προσεγγίσεις για την επαναφόρτωση του div χωρίς επαναφόρτωση ολόκληρης της σελίδας σε JavaScript.
Πώς να φορτώσετε ξανά το div χωρίς να φορτώσετε ξανά ολόκληρη τη σελίδα στο jQuery;
Ο ' div ' μπορεί να επαναφορτωθεί χωρίς επαναφόρτωση ολόκληρης της σελίδας χρησιμοποιώντας τη μέθοδο 'on()' του jQuery σε συνδυασμό με το ' φορτώνω() 'μέθοδος.
Η μέθοδος on() συσχετίζει έναν ή περισσότερους χειριστές συμβάντων για τα στοιχεία και η μέθοδος load() φορτώνει το περιεχόμενο στο στοιχείο που ανακτήθηκε. Αυτές οι μέθοδοι μπορούν να συνδυαστούν για πρόσβαση στο div και επαναφόρτωσή του στο συμβάν που ενεργοποιήθηκε.
Παράδειγμα
Ας δούμε γενικά τον ακόλουθο κώδικα HTML:
< σώμα >
< h2 > Αυτός είναι ο τρόπος επαναφόρτωσης του div χωρίς επαναφόρτωση ολόκληρης της σελίδας h2 >
< div id = 'myDiv' >
< Π > Η JavaScript είναι μια γλώσσα προγραμματισμού που περιέχει συναρτήσεις , μεταβλητές , γεγονότα και αντικείμενα κ.λπ. Π >
div >
< κουμπί > φορτώνω πάλι κουμπί >
σώμα >
Στο παραπάνω μπλοκ κώδικα:
- Συμπεριλάβετε την αναφερόμενη επικεφαλίδα.
- Επίσης, καθορίστε το στοιχείο '' που έχει το χαρακτηριστικό 'id'.
- Μετά από αυτό, συμπεριλάβετε την παράγραφο στην ετικέτα '
' και ένα κουμπί για να ενεργοποιήσετε την επιθυμητή λειτουργικότητα.
Τώρα, ας προχωρήσουμε στον κώδικα JavaScript:
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
γραφή >
< γραφή >
$ ( 'κουμπί' ) . επί ( 'Κάντε κλικ' , λειτουργία ( ) {
$ ( '#myDiv' ) . φορτώνω ( '#myDiv' )
συναγερμός ( 'Επαναφόρτωση' )
} ) ;Σε αυτό το απόσπασμα κώδικα
- Συμπεριλάβετε τη βιβλιοθήκη jQuery μέσω του ' src ' Χαρακτηριστικό.
- Πρόσβαση στο κουμπί που δημιουργήθηκε και συσχετίστε το ' επί() 'μέθοδος.
- Αυτό θα ενεργοποιήσει την αναφερόμενη λειτουργία με το πάτημα του κουμπιού, όπως φαίνεται από το συνημμένο συμβάν ' Κάντε κλικ '.
- Στον ορισμό της λειτουργίας, αποκτήστε πρόσβαση στο περιλαμβανόμενο ' ' στοιχείο και φορτώστε το ξανά χρησιμοποιώντας το ' φορτώνω() ' μέθοδος με αναφορά στο ' ταυτότητα '.
- Ως αποτέλεσμα, το συμπεριλαμβανόμενο div θα φορτωθεί ξανά με το πάτημα του κουμπιού και θα εμφανιστεί το δηλωμένο μήνυμα μέσω του πλαισίου διαλόγου ειδοποίησης.
Παραγωγή
Μπορεί να παρατηρηθεί ότι το div επαναφορτώθηκε με επιτυχία χωρίς να φορτωθεί ξανά ολόκληρη η σελίδα.
συμπέρασμα
Για να φορτώσετε ξανά το div χωρίς να φορτώσετε ξανά ολόκληρη τη σελίδα, χρησιμοποιήστε το ' επί() μέθοδος σε συνδυασμό με το φορτώνω() 'μέθοδος. Αυτές οι μέθοδοι μπορούν να χρησιμοποιηθούν για τη φόρτωση εκ νέου του περιεχομένου του div στο συμβάν που ενεργοποιήθηκε, αποκτώντας πρόσβαση σε αυτό και ανατρέχοντας ξανά σε αυτό. Αυτό το ιστολόγιο περιέγραψε τη μέθοδο επαναφόρτωσης του div χωρίς επαναφόρτωση ολόκληρης της σελίδας.
- Μετά από αυτό, συμπεριλάβετε την παράγραφο στην ετικέτα '