用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代码
Mar 06 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
JavaScript实现简单动态表格
Dec 02 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(一)
2012/03/21 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
js html实现计算器功能
2018/11/13 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python实现翻译word表格小程序
2020/02/27 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
好军嫂事迹材料
2014/01/15 职场文书
安全生产检查通报
2014/01/29 职场文书
2014年元旦活动方案
2014/02/15 职场文书
副董事长岗位职责
2014/04/02 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
爬山的活动方案
2014/08/16 职场文书
环境保护建议书
2014/08/26 职场文书
观看信仰心得体会
2014/09/04 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
php双向队列实例讲解
2021/11/17 PHP