jQuery+ajax实现局部刷新
在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()，其他高级方法的使用以后再做详细笔记。
第一种：
当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。
jq-load.html：
<!DOCTYPE html>
<html>
<head>
<title>ajax局部刷新</title>
</head>
<body> <header>
<nav>
<a href="jq-load.html" class="current">首页</a>
<a href="jq-load2.html">新闻资讯</a>
<a href="jq-load3.html">用户中心</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-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
如果有什么问题，还请园子里的朋友多多指教。多谢。
2017-11-15
jQuery+ajax实现局部刷新的更多相关文章
- Ajax 异步局部刷新
Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...
- jquery的div局部刷新
jquery的div局部刷新 //div的局部刷新 $(".dl").load(location.href+" .dl"); 全页面的刷新方法 window.l ...
- jquery 实现页面局部刷新ajax做法
这个方法就多了去了,常见的有以下几种:下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- jquery实现页面局部刷新
后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
随机推荐
- Maven打包Jar
现状 该项目使用了Maven,并且引入了Spring,包含代码.配置文件.Jar包,使用的是IDEA来作为开发工具,项目的产出物是要打包成一个可运行的Jar包.通过IDEA的打包工具也可以打包成功,只 ...
- Linux常见命令集锦
这是平常用到的命令在这里做一下总结: 一.python 类1.pip(已安装)pip用来安装来自PyPI(https://www.python.org/)的python所有的依赖包,并且可以选择安装任 ...
- 【转】Python-__builtin__与__builtins__的区别与关系(超详细,经典)
在学习Python时,很多人会问到__builtin__.__builtins__和builtins之间有什么关系.百度或Google一下,有很 多答案,但是这些答案要么不准确,要么只说了一点点,并不 ...
- SQL SERVER 根据地图经纬度计算距离函数
前些天客户提出一个这样的要求:一个手机订餐网,查询当前所在位置的5公里范围的酒店,然后客户好去吃饭. 拿到这个请求后,不知道如何下手,静静地想了一下,在酒店的表中增加两个字段,用来存储酒店所在的经度和 ...
- Mysql安装后打开MySQL Command Line Client闪退解决方法
1.开始菜单下;Mysql--->mysql server 5.6-->mysql command line Client ---右击,选择属性 2.在属性下查看目标位置: 3.将安装目录 ...
- Java Web开发——MySQL数据库的安装与配置
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RD ...
- DOM2练习
左右互相输入 <!DOCTYPE html><html> <head> <meta charset="UTF-8"&g ...
- FastDFS分布式文件系统
FastDFS分布式文件系统 阅读目录 相关文章 1 分布式文件系统介绍 2 系统架构介绍 3 FastDFS性能方案 4 Linux基本命令操作 5 安装VirtualBox虚拟机并配置Ubuntu ...
- win10 uwp 右击浮出窗在点击位置
本文主要让MenuFlyout出现在我们右击位置. 我们一般使用的MenuFlyout写在前台,写在Button里面,但是可能我们的MenuFlyout显示的位置和我们想要的不一样. 通过使用后台写S ...
- 解题笔记-洛谷-P1010 幂次方
0 题面 题目描述 任何一个正整数都可以用2的幂次方表示.例如 137=2^7+2^3+2^0 同时约定方次用括号来表示,即a^b 可表示为a(b). 由此可知,137可表示为: 2(7)+2(3)+ ...