用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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
一个简单计数器的源代码
2006/10/09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
详解Python self 参数
2019/08/30 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python tornado上传文件的功能
2020/03/26 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python打开音乐文件的实例方法
2020/07/21 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
大二学期个人自我评价
2014/01/13 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
应届毕业生自荐信
2015/03/04 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python