用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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
PHP守护进程实例
Mar 06 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JavaScript类的写法
Sep 17 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 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
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php制作动态随机验证码
2015/02/12 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python排序函数的使用方法详解
2020/12/11 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
策划创业计划书
2014/02/06 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
放假通知
2015/04/14 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书