jQuery+ajax implémente une actualisation partielle
Dans les projets, ajax est souvent utilisé, par exemple pour obtenir un rafraîchissement partiel, comme une interaction front-end et back-end, etc. Nous partageons ici deux méthodes de rafraîchissement partiel, utilisant principalement .load() en ajax.
Le premier type :
Lorsque plusieurs pages ont le même en-tête, la même navigation et le même bas, cliquez sur le lien de navigation pour naviguer entre plusieurs pages. la page, l'effet recherché à ce moment est de changer la partie contenu uniquement après avoir cliqué sur le lien, et les autres parties ne seront pas rechargées. Code vers le haut.
jq-load.html :
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ajax局部刷新</title> 5 </head> 6 <body> 7 8 <header> 9 <nav>10 <a href="jq-load.html" class="current">首页</a>11 <a href="jq-load2.html">新闻资讯</a>12 <a href="jq-load3.html">用户中心</a>13 </nav>14 </header>15 16 <section id="content">17 <div id="container">18 首页的内容19 </div>20 </section>21 22 <script src="js/jquery-1.11.0.min.js?1.1.11"></script>23 <script src="js/jq-load.js?1.1.11"></script>24 25 </body>26 </html>
Remarque : jq-load2.html, jq-load3.html et Le code de jq-load.html est fondamentalement le même, seul le contenu affiché dans le div de #container est différent.
jq-load.js :
1 $('nav a').on('click', function(e) {
2 e.preventDefault(); // 阻止链接跳转 3 var url = this.href; // 保存点击的地址 4 5 $('nav a.current').removeClass('current');
6 $(this).addClass('current');
7 8 $('#container').remove();
9 $('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container10 });Remarque : Cette méthode utilise de nouvelles balises en html5. Il n'est pas facile de les créer en js. . Encore.
Deuxième type :
S'il y a une liste sur le côté gauche de la page Web, cliquez sur la liste pour changer le contenu sur le côté droit. Il y en a trop, donc cela ne convient pas aux onglets. Pour le moment, il est préférable d'utiliser .load() pour actualiser localement. Code vers le haut.
user.html :
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>个人中心</title> 5 <meta charset="utf-8"> 6 <script src="js/jquery-1.11.0.min.js?1.1.11"></script> 7 <script src="js/user.js?1.1.11"></script> 8 </head> 9 <body>10 11 <div class="userWrap">17 <ul class="userMenu">18 <li class="current" data-id="center">用户中心</li>19 <li data-id="account">账户信息</li>20 <li data-id="trade">交易记录</li>21 <li data-id="info">消息中心</li>22 </ul>23 <div id="content"></div>25 </div>26 27 </body>28 </html>
user.js :
$(".userMenu").on("click", "li", sId = $().data("id"); window.location.hash = sId; sId = "#center": pathn = "user_center.html"; i = 0; "#account": pathn = "user_account.html"; i = 1; "#trade": pathn = "user_trade.html"; i = 2; "#info": pathn = "user_info.html"; i = 3; : pathn = "user_center.html"; i = 0; "#content").load(pathn); $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); sId =user_center.html :
<div>用户中心 ……</div>
Remarque : D'autres pages user_xxx.html correspondent également à la liste et ne seront pas décrites à nouveau ici.
Résumé :
Les principes des deux méthodes ci-dessus sont les mêmes. Rechargez une certaine partie de la page via .load(). être dans l’environnement serveur exécuté ci-dessous. Par comparaison, on peut constater que le premier est relativement simple et le second est légèrement plus compliqué. Cependant, je recommande personnellement le second. Le premier sert principalement à donner un exemple pour voir comment fonctionne .load(). utilisé.En fait, il joue un rôle important dans l'expérience utilisateur.Par exemple, lorsque vous cliquez, l'adresse dans la barre d'adresse ne change pas, ce qui rend l'avant et l'arrière invalides. La deuxième méthode est plus flexible. Elle utilise intelligemment les attributs personnalisés de data-* pour stocker les données. Lorsque vous cliquez, le point d'ancrage est modifié, le contenu actuel de la page sera toujours conservé lors de l'actualisation au lieu de passer à. Le premier.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
6 façons d'actualiser les pages Web sur iPhone
Feb 05, 2024 pm 02:00 PM
Lorsque vous naviguez sur le Web sur votre iPhone, le contenu chargé est temporairement stocké tant que l'application du navigateur reste ouverte. Cependant, le site Web met régulièrement à jour le contenu, donc actualiser la page est un moyen efficace d'effacer les anciennes données et de voir le dernier contenu publié. De cette façon, vous disposez toujours des dernières informations et expériences. Si vous souhaitez actualiser la page sur iPhone, l'article suivant vous expliquera toutes les méthodes. Comment actualiser les pages Web sur Safari [4 méthodes] Il existe plusieurs méthodes pour actualiser les pages que vous consultez sur l'application Safari sur iPhone. Méthode 1 : utiliser le bouton Actualiser Le moyen le plus simple d'actualiser une page ouverte sur Safari consiste à utiliser l'option Actualiser dans la barre d'onglets de votre navigateur. Si Safa
La touche d'actualisation F5 ne fonctionne pas sous Windows 11
Mar 14, 2024 pm 01:01 PM
La touche F5 ne fonctionne pas correctement sur votre PC Windows 11/10 ? La touche F5 est généralement utilisée pour actualiser le bureau ou l'explorateur ou recharger une page Web. Cependant, certains de nos lecteurs ont signalé que la touche F5 actualisait leur ordinateur et ne fonctionnait pas correctement. Comment activer l’actualisation F5 dans Windows 11 ? Pour actualiser votre PC Windows, appuyez simplement sur la touche F5. Sur certains ordinateurs portables ou de bureau, vous devrez peut-être appuyer sur la combinaison de touches Fn+F5 pour terminer l'opération d'actualisation. Pourquoi l’actualisation F5 ne fonctionne-t-elle pas ? Si l'appui sur la touche F5 ne parvient pas à actualiser votre ordinateur ou si vous rencontrez des problèmes sous Windows 11/10, cela peut être dû au verrouillage des touches de fonction. D'autres causes potentielles incluent le clavier ou la touche F5
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ?
Mar 24, 2024 am 11:27 AM
Comment mettre en œuvre la double connexion WeChat sur les téléphones mobiles Huawei ? Avec l’essor des réseaux sociaux, WeChat est devenu l’un des outils de communication indispensables dans la vie quotidienne des gens. Cependant, de nombreuses personnes peuvent rencontrer un problème : se connecter à plusieurs comptes WeChat en même temps sur le même téléphone mobile. Pour les utilisateurs de téléphones mobiles Huawei, il n'est pas difficile d'obtenir une double connexion WeChat. Cet article explique comment obtenir une double connexion WeChat sur les téléphones mobiles Huawei. Tout d'abord, le système EMUI fourni avec les téléphones mobiles Huawei offre une fonction très pratique : l'ouverture d'une double application. Grâce à la fonction de double ouverture de l'application, les utilisateurs peuvent simultanément
Utilisez Java pour écrire du code pour implémenter l'animation amoureuse
Dec 23, 2023 pm 12:09 PM
Réaliser des effets d'animation d'amour grâce au code Java Dans le domaine de la programmation, les effets d'animation sont très courants et populaires. Divers effets d'animation peuvent être obtenus grâce au code Java, dont l'effet d'animation cardiaque. Cet article expliquera comment utiliser le code Java pour obtenir cet effet et donnera des exemples de code spécifiques. La clé pour réaliser l'effet d'animation du cœur est de dessiner le motif en forme de cœur et d'obtenir l'effet d'animation en changeant la position et la couleur de la forme du cœur. Voici le code pour un exemple simple : importjavax.swing.
Guide de programmation PHP : méthodes pour implémenter la séquence de Fibonacci
Mar 20, 2024 pm 04:54 PM
Le langage de programmation PHP est un outil puissant pour le développement Web, capable de prendre en charge une variété de logiques et d'algorithmes de programmation différents. Parmi eux, l’implémentation de la séquence de Fibonacci est un problème de programmation courant et classique. Dans cet article, nous présenterons comment utiliser le langage de programmation PHP pour implémenter la séquence de Fibonacci et joindrons des exemples de code spécifiques. La suite de Fibonacci est une suite mathématique définie comme suit : le premier et le deuxième élément de la suite valent 1, et à partir du troisième élément, la valeur de chaque élément est égale à la somme des deux éléments précédents. Les premiers éléments de la séquence
Comment actualiser rapidement une page Web ?
Feb 18, 2024 pm 01:14 PM
L'actualisation des pages est très courante dans notre utilisation quotidienne du réseau. Lorsque nous visitons une page Web, nous rencontrons parfois certains problèmes, comme la page Web qui ne se charge pas ou ne s'affiche pas anormalement, etc. À ce stade, nous choisissons généralement d'actualiser la page pour résoudre le problème, alors comment actualiser la page rapidement ? Discutons des touches de raccourci pour l'actualisation de la page. La touche de raccourci d'actualisation de page est une méthode permettant d'actualiser rapidement la page Web actuelle via des opérations au clavier. Dans différents systèmes d'exploitation et navigateurs, les touches de raccourci pour l'actualisation de la page peuvent être différentes. Ci-dessous, nous utilisons le W commun
Comment implémenter la fonction de clonage WeChat sur les téléphones mobiles Huawei
Mar 24, 2024 pm 06:03 PM
Comment mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei Avec la popularité des logiciels sociaux et l'importance croissante accordée à la confidentialité et à la sécurité, la fonction de clonage WeChat est progressivement devenue le centre d'attention. La fonction de clonage WeChat peut aider les utilisateurs à se connecter simultanément à plusieurs comptes WeChat sur le même téléphone mobile, ce qui facilite la gestion et l'utilisation. Il n'est pas difficile de mettre en œuvre la fonction de clonage WeChat sur les téléphones mobiles Huawei. Il vous suffit de suivre les étapes suivantes. Étape 1 : Assurez-vous que la version du système de téléphonie mobile et la version de WeChat répondent aux exigences. Tout d'abord, assurez-vous que la version de votre système de téléphonie mobile Huawei a été mise à jour vers la dernière version, ainsi que l'application WeChat.
Comment mettre en œuvre une opération de division exacte dans Golang
Feb 20, 2024 pm 10:51 PM
La mise en œuvre d'opérations de division exactes dans Golang est un besoin courant, en particulier dans les scénarios impliquant des calculs financiers ou d'autres scénarios nécessitant des calculs de haute précision. L'opérateur de division intégré "/" de Golang est calculé pour les nombres à virgule flottante, et il y a parfois un problème de perte de précision. Afin de résoudre ce problème, nous pouvons utiliser des bibliothèques tierces ou des fonctions personnalisées pour implémenter des opérations de division exactes. Une approche courante consiste à utiliser le type Rat du package math/big, qui fournit une représentation des fractions et peut être utilisé pour implémenter des opérations de division exactes.
