没有合适的资源?快使用搜索试试~ 我知道了~
jQuery+ajax实现局部刷新的两种方法
17 下载量 198 浏览量
2020-10-19
17:58:57
上传
评论 1
收藏 60KB PDF 举报
温馨提示
试读
2页
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
资源推荐
资源详情
资源评论
jQuery+ajax实现局部刷新的两种方法实现局部刷新的两种方法
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主
要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
在项目中,经常会用到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>
资源评论
weixin_38685173
- 粉丝: 5
- 资源: 923
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功