Comment mettre à jour une section de page Web à l'aide de jQuery/AJAX sans rechargement ?

Comment mettre à jour une partie d'une page sans recharger à l'aide de jQuery/AJAX

Recharger un div spécifique en cliquant sur un bouton sans affecter l'ensemble la page est une exigence courante dans le développement Web. Ceci peut être réalisé en utilisant la fonctionnalité AJAX de jQuery.

Exemple

Supposons que vous ayez un bouton qui, lorsque vous cliquez dessus, doit mettre à jour le contenu d'un div appelé div1 . Voici comment procéder :

HTML :

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery :

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

Explication :

• Le gestionnaire d'événements de clic jQuery est attaché au bouton avec l'identifiant myButton.
• Lorsque le bouton est cliqué, le load() est appelée sur le div avec l'identifiant div1.
La fonction
• load() charge le contenu de l'URL spécifiée dans le div.
Dans ce cas, l'URL est
• location.href " #div1". Cela récupère l'URL de la page actuelle et ajoute le sélecteur #div1.
L'espace avant le deuxième signe
• # est crucial. Sans cela, le code ci-dessus rechargera la page entière au sein du div.
Par conséquent, lorsque vous cliquez sur le bouton, le contenu de
• div1 sera mis à jour avec le contenu du même div de la page actuelle.

Remarque : N'oubliez pas d'inclure la bibliothèque jQuery avant d'utiliser le code ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!