用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 相关文章推荐
JS 两个字符串时间的天数差计算
Aug 25 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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
简单的页面缓冲技术
2006/10/09 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
简单谈谈python的反射机制
2016/06/28 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
党支部书记先进事迹
2014/01/17 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
领导欢迎词范文
2015/01/26 职场文书
python编写函数注意事项总结
2021/03/29 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android