jQuery+ajax实现局部刷新的两种方法

前端之家收集整理的这篇文章主要介绍了jQuery+ajax实现局部刷新的两种方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load()。

第一种:

当某几个页面都有相同的头部、导航、底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载。上代码

jq-load.html:

ajax局部刷新
首页的内容

注:jq-load2.html、jq-load3.html与jq-load.HTML代码基本一致,只在#container的div里展示的内容不一样。

jq-load.js:

链接跳转 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中创建它们不再赘述。

第二种:

如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.load()局部刷新最好不过了。上代码

user.html:

个人中心 <Meta charset="utf-8">
用户中心
  • user.js:

    获取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:

    用户中心 ……

    注:其他user_xxx.html的页面也是列表相对应的内容,此处不再赘述。

    总结:

    以上两种方法原理是一样的,通过.load()重新加载页面中的某一部分,需注意,ajax需要在服务器环境下运行。通过对比,可发现第一种比较简单,第二种稍复杂些,不过个人推荐第二种,第一种主要是举个例子,看.load()是怎么来用的,其实它在用户体验方面稍逊一筹,比如点击的时候地址栏里地址不变,使前进、后退失效,这个可以到后面再实现。而第二种的话运用比较灵活,巧妙的借助data-*的自定义属性来存储数据,点击的时候修改锚点,因为地址有变,所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。

    以上所述是小编给大家介绍的jQuery+ajax实现局部刷新的两种方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/ajax/38781.html

    猜你在找的Ajax相关文章