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 22 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python下载网络小说实例代码
2018/02/03 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python3.x实现base64加密和解密
2019/03/28 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
10个顶级Python实用库推荐
2021/03/04 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
人事助理自荐信
2014/02/02 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技