用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简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
QML实现圆环颜色选择器
Sep 25 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
限制复选框的最大可选数
2006/07/01 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
关于python2 csv写入空白行的问题
2018/06/22 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
幼儿教师考核制度
2014/01/25 职场文书
军人违纪检讨书
2014/02/04 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2015年技术员工作总结
2015/04/10 职场文书
千手观音观后感
2015/06/03 职场文书
执行力心得体会范文
2016/01/11 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技