Ce blog discutera des approches pour recharger la div sans recharger la page entière en JavaScript.
Comment recharger la div sans recharger la page entière dans jQuery ?
Le ' div ' peut être rechargé sans recharger la page entière en utilisant la méthode 'on()' de jQuery en combinaison avec le ' charger() ' méthode.
La méthode on() associe un ou plusieurs gestionnaires d'événements pour les éléments, et la méthode load() charge le contenu dans l'élément récupéré. Ces méthodes peuvent être combinées pour accéder à la div et la recharger lors de l'événement déclenché.
Exemple
Passons en revue le code HTML suivant :
< corps >
< h2 > Voici comment recharger la div sans recharger la page entière h2 >
< identifiant div = 'maDiv' >
< p > JavaScript est un langage de programmation qui contient des fonctions , variables , événements et objets, etc. p >
div >
< bouton > recharger bouton >
corps >
Dans le bloc de code ci-dessus :
- Inclure le titre indiqué.
- Spécifiez également l'élément « » ayant l'attribut « id ».
- Après cela, incluez le paragraphe dans la balise '
' et un bouton pour déclencher la fonctionnalité souhaitée.
Passons maintenant au code JavaScript :
< source de script = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
scénario >
< scénario >
$ ( 'bouton' ) . au ( 'Cliquez sur' , une fonction ( ) {
$ ( '#maDiv' ) . charger ( '#maDiv' )
alerte ( 'Rechargé' )
} ) ;Dans cet extrait de code
- Inclure la bibliothèque jQuery via le ' src ' attribut.
- Accédez au bouton créé et associez le ' au() ' méthode.
- Cela invoquera la fonction mentionnée lors du clic sur le bouton, comme en témoigne l'événement joint ' Cliquez sur ”.
- Dans la définition de la fonction, accédez au ' ' et chargez-le à nouveau à l'aide de l'élément ' charger() ” méthode en se référant à son “ identifiant ”.
- En conséquence, la div incluse sera rechargée à nouveau lors du clic sur le bouton, et le message indiqué via la boîte de dialogue d'alerte s'affichera.
Production
On peut observer que le div est rechargé avec succès sans recharger la page entière.
Conclusion
Pour recharger la div sans recharger toute la page, utilisez le ' au() ” méthode en combinaison avec la “ charger() ' méthode. Ces méthodes peuvent être utilisées pour recharger le contenu de la div lors de l'événement déclenché en y accédant et en s'y référant à nouveau. Ce blog décrit la méthode pour recharger la div sans recharger la page entière.
- Après cela, incluez le paragraphe dans la balise '