用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选择头像并实时显示的代码
Jun 27 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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+MSSQL分页的例子
2006/10/09 PHP
php抓取https的内容的代码
2010/04/06 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
python实现的jpg格式图片修复代码
2015/04/21 Python
Python简单读取json文件功能示例
2017/11/30 Python
python对象与json相互转换的方法
2019/05/07 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python实现日志按天分割
2019/07/22 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
统计员岗位职责
2013/11/14 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
体育口号大全
2014/06/18 职场文书
单位在职证明书
2014/09/11 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技