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


Posted in jQuery onJune 08, 2017

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

第一种:

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

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">
   <div id="container">
     首页的内容
   </div>
  </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的div里展示的内容不一样。

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

第二种:

如果网页的左侧有一个列表,点击列表使右侧的内容进行切换,如果右侧的内容过多,不适合做选项卡,这时候用.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>
    <div 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>
      <div id="content"></div>
    </div>
  </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:

<div>
  用户中心
  ……
</div>

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

总结:

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

以上所述是小编给大家介绍的jQuery+ajax实现局部刷新的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
You might like
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php制作动态随机验证码
2015/02/12 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python 迭代器工具包【推荐】
2016/05/06 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python中的整除和取模实例
2020/06/03 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
销售人员求职信
2014/07/22 职场文书
工人先锋号申报材料
2014/12/29 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL