用Jquery.load载入页面实现局部刷新


Posted in Javascript onJanuary 22, 2014

因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答:

是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添加js事件的。比如:
原页面A.html:

<html> 
<head><title></title></head> 
<body> 
<div id="container"></div> 
</body></html> 
被load的页面B.html: 
<html> 
<head><title></title></head> 
<style>.page-li {font-size:12px;color:blue}</style> 
<body> 
<div id="page"> 
<ol class="page-li"> 
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li> 
</ol> 
</div> 
</body></html> 在原页面A.html中加载调用的jquery.load(),然后再在原页面对 page-li 的样式重新定义下就可以了: 
添加了load(),css的原页面: 
<html> 
<head><title></title></head> 
<style>.page-li {font-size:12px;color:green}</style> 
<body> 
<div id="container"></div> 
<script type="text/javascript"> 
$(function(){ 
$("#container").load("B.html #page",null,function(){alert("加载成功")}); 
}); 
</script> 
</body></html>

希望对你有帮助
Javascript 相关文章推荐
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
javascript之Partial Application学习
Jan 10 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
原生js+canvas实现验证码
Nov 29 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 #Javascript
在JS中如何调用JSP中的变量
Jan 22 #Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 #Javascript
JS中的数组的sort方法使用示例
Jan 22 #Javascript
禁止拷贝网页内容的js代码
Jan 22 #Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 #Javascript
js的alert样式如何更改如背景颜色
Jan 22 #Javascript
You might like
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
党员学习十八大感想
2014/01/17 职场文书
对公司合理化的建议书
2014/03/12 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
家长学校教学计划
2015/01/19 职场文书
刑事辩护词范文
2015/05/21 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL