Maison > Article > interface Web > jQuery et ajax implémentent une actualisation partielle
jQuery et ajax implémentent une actualisation partielle
- 小云云original
- 2018-01-10 10:22:091801parcourir
Cet article partage principalement avec vous deux méthodes différentes de jQuery et ajax pour obtenir un rafraîchissement partiel. Dans les projets, ajax est souvent utilisé, par exemple pour implémenter un rafraîchissement partiel, comme l'interaction front-end et back-end, etc. nous partageons deux méthodes de rafraîchissement partiel. La méthode utilise principalement .load() en ajax. Les amis intéressés peuvent y jeter un œil ensemble.
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 basculer entre plusieurs pages. À ce moment, vous voulez L'effet est qu'après. en cliquant sur le lien, seule la partie contenu est commutée et les autres parties ne sont pas rechargées. Remontez le code.
jq-load.html :
<!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </head> <body> <header> <nav> <a href="jq-load.html" rel="external nofollow" class="current">首页</a> <a href="jq-load2.html" rel="external nofollow" >新闻资讯</a> <a href="jq-load3.html" rel="external nofollow" >用户中心</a> </nav> </header> <section id="content"> <p id="container"> 首页的内容 </p> </section> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jq-load.js"></script> </body> </html>
Remarque : Les codes de jq-load2.html, jq-load3.html et jq-load.html sont fondamentalement les mêmes, uniquement dans le p de #container Le contenu affiché ici est différent.
jq-load.js :
$('nav a').on('click', function(e) {
e.preventDefault(); // 阻止链接跳转
var url = this.href; // 保存点击的地址
$('nav a.current').removeClass('current');
$(this).addClass('current');
$('#container').remove();
$('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container
});
Remarque : Cette méthode utilise de nouvelles balises en html5. Leur création en js ne sera pas décrite à nouveau.
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 ne convient pas aux onglets. Il est préférable d'utiliser .load() pour actualiser localement. Remontez le code.
user.html :
<!DOCTYPE html> <html lang="en"> <head> <title>个人中心</title> <meta charset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/user.js"></script> </head> <body> <p class="userWrap"> <ul class="userMenu"> <li class="current" data-id="center">用户中心</li> <li data-id="account">账户信息</li> <li data-id="trade">交易记录</li> <li data-id="info">消息中心</li> </ul> <p id="content"></p> </p> </body> </html>
user.js :
$(function(){
$(".userMenu").on("click", "li", function(){
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;
var pathn, i;
switch(sId){
case "#center": pathn = "user_center.html"; i = 0; break;
case "#account": pathn = "user_account.html"; i = 1; break;
case "#trade": pathn = "user_trade.html"; i = 2; break;
case "#info": pathn = "user_info.html"; i = 3; break;
default: pathn = "user_center.html"; i = 0; break;
}
$("#content").load(pathn); //加载相对应的内容
$(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
}
var sId = window.location.hash;
loadInner(sId);
});
user_center.html :
<p> 用户中心 …… </p>
Remarque : autre utilisateur_xxx. La page html est également le contenu correspondant à la liste, je n'entrerai donc pas dans les détails ici.
Résumé :
Les principes des deux méthodes ci-dessus sont les mêmes. Rechargez une certaine partie de la page via .load(). Veuillez noter qu'ajax doit s'exécuter dans un environnement de serveur. 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.
Recommandations associées :
Ajax implémente une interface de connexion à actualisation partielle avec code de vérification
Exemple d'actualisation partielle JQuery ajax
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!