用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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python基础教程之序列详解
2014/08/29 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python Cartopy的基础使用详解
2020/11/01 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
2014年统计工作总结
2014/11/21 职场文书
解除租房协议书
2014/12/03 职场文书
鸡毛信观后感
2015/06/11 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL