Maison > Article > interface Web > Comment actualiser un div avec jquery

Comment actualiser un div avec jquery

PHPzoriginal: 2023-05-28 10:28:071963parcourir

Dans le développement front-end, nous avons souvent besoin de mettre à jour dynamiquement le contenu des pages Web, et JQuery est une bibliothèque JavaScript très populaire. Elle fournit de nombreuses fonctions d'outils pour nous faciliter la mise à jour des éléments de la page. Parmi eux, l'actualisation de div est une exigence relativement courante. Voyons comment JQuery actualise div.

Tout d’abord, nous devons clarifier ce qu’est le rafraîchissement div. Généralement, l'actualisation div est utilisée lorsque le contenu d'une certaine zone div doit être mis à jour après que la requête asynchrone a renvoyé des données, sans actualiser la page entière. Cette méthode consistant à actualiser seulement une partie du contenu sans actualiser la page entière peut rendre le flux frontal plus fluide et l'expérience utilisateur plus fluide.

Ensuite, nous devons comprendre l'utilisation de base de JQuery. La première chose qui doit être claire est que JQuery est une bibliothèque JavaScript, nous devons donc introduire le fichier js de JQuery. Normalement, nous mettrons le code suivant dans l'en-tête du fichier HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

Après avoir présenté JQuery, voyons comment utiliser JQuery pour mettre à jour le contenu du div. De manière générale, la mise à jour du contenu d'un div est divisée en deux étapes : la première étape consiste à obtenir l'élément div qui doit être mis à jour via JQuery, et la deuxième étape consiste à mettre à jour le contenu du div via l'API fournie par JQuery. .

La méthode pour obtenir l'élément div est très simple. Il vous suffit d'utiliser le sélecteur de JQuery pour obtenir l'élément div qui doit être mis à jour, par exemple :

var divElement = $('div#updateDiv');

Ici, nous utilisons le sélecteur de l'élément div avec l'identifiant updateDiv. pour l'obtenir, et attribuez-le à la variable divElement.

Ensuite, nous devons utiliser l'API fournie par JQuery pour mettre à jour le contenu de ce div. JQuery fournit une variété de méthodes API pour mettre à jour le contenu des éléments. Les méthodes couramment utilisées sont html() et text().

Mettre à jour le contenu du div via la méthode html()

La méthode html() peut définir ou renvoyer le contenu de l'élément sélectionné. Plus précisément, elle peut être utilisée pour insérer du code HTML dans l'élément div spécifié.

Par exemple, nous utilisons le code suivant pour obtenir des données en appelant Ajax :

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').html('任务名称：' + data.title + '<br>' + '任务状态：' + data.completed);
  }
});

Ici, nous obtenons les données en appelant Ajax, et fusionnons les valeurs du titre et les attributs complétés des données en chaînes de nom de tâche et l'état de la tâche, puis appelez la méthode html() pour mettre à jour cette chaîne dans l'élément div.

Mettre à jour le contenu du div via la méthode text()

La méthode text() peut définir ou renvoyer le contenu textuel de l'élément sélectionné. Vous pouvez l'utiliser pour mettre à jour le contenu textuel de l'élément div spécifié.

Par exemple, nous utilisons le code suivant pour obtenir des données en appelant Ajax :

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').text('任务名称：' + data.title + '，' + '任务状态：' + data.completed);
  }
});

Ici, nous obtenons également les données en appelant Ajax, et fusionnons les valeurs du titre et les attributs complétés des données dans une chaîne de task name et task status , puis appelez la méthode text() pour mettre à jour cette chaîne dans l'élément div.

Avec la méthode ci-dessus, nous pouvons facilement mettre à jour le contenu div sur le front-end. Mais il convient de noter que cette méthode de mise à jour n'est applicable que lorsque le contenu du div n'est pas une structure HTML complexe. Si le contenu mis à jour est plus complexe, nous pouvons utiliser des frameworks front-end tels que Vue.js pour obtenir une meilleure expérience de développement.

Résumé :

JQuery est l'une des bibliothèques JavaScript couramment utilisées dans le développement front-end. En utilisant l'API de JQuery, vous pouvez facilement utiliser les éléments de la page. Lors de l'implémentation de l'actualisation div, en obtenant d'abord l'élément div qui doit être mis à jour, puis en utilisant les méthodes API fournies par JQuery, telles que les méthodes html() et text(), pour mettre à jour le contenu du div, vous pouvez actualiser le div. page entière sans actualiser la page entière. Effets de contenu partiel.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：signe d'inégalité de valeur jqueryArticle suivant：signe d'inégalité de valeur jquery

Articles Liés

Voir plus