ホームページ > 記事 > ウェブフロントエンド > jQuery+とajaxで部分リフレッシュ機能を実装する方法
jQuery+とajaxで部分リフレッシュ機能を実装する方法
- php中世界最好的语言オリジナル
- 2018-04-25 15:07:011596ブラウズ
今回は、jQuery+とajaxで部分リフレッシュ機能を実装する方法を紹介します。 jQuery+とajaxで部分リフレッシュ機能を実装する際の注意事項は何ですか?以下は実際のケースです。
特定のページに同じヘッダー、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>注: jq-load2.html、jq-load3.html、および jq-load.html のコードは基本的に同じですが、#container の p に表示される内容のみが異なります。異なります。 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
}); 注: このメソッドは HTML5 のいくつかの新しいタグを使用します。js での作成については再度説明しません。
2番目の方法:
Webページの左側にリストがある場合は、リストをクリックして右側のコンテンツを切り替えます。この場合は、 .load () を使用します。部分更新が最適です。コードをアップします。 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>注: 他の user_xxx.html ページもリストに対応しているため、ここでは繰り返しません。
概要:
上記の 2 つのメソッドは、.load() を介してページの特定の部分をリロードします。ajax はサーバー環境で実行する必要があることに注意してください。比較すると、1 つ目は比較的単純で、2 つ目は少し複雑であることがわかります。ただし、個人的には 2 つ目は、主に .load() がどのようなものかを理解するための例をお勧めします。実際、これはユーザーエクスペリエンスにおいて重要な役割を果たします。たとえば、クリックしてもアドレスバーのアドレスが変化せず、後から実装することができます。 2 番目の方法は、data-* のカスタム属性 を巧みに使用してデータを保存します。アドレスが変更されるため、更新時に現在のページのコンテンツが維持されます。最初のものに切り替えます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:以上がjQuery+とajaxで部分リフレッシュ機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。