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实现全选、全不选以及单选功能
Mar 23 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python正则表达式指南 推荐
2018/10/09 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
五年级英语教学反思
2014/01/31 职场文书
《将心比心》教学反思
2014/04/08 职场文书
劳资协议书范本
2014/04/23 职场文书
考核评语大全
2014/04/29 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python