用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 文件大小判断的实现代码
Apr 07 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js实现select跳转功能代码
Oct 22 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
7个jQuery最佳实践
Jan 12 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
node.js实现快速截图
Aug 27 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
ie focus bug 解决方法
2009/09/03 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
python 重定向获取真实url的方法
2018/05/11 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
部队领导证婚词
2014/01/12 职场文书
大学生军训广播稿
2014/01/24 职场文书
厨师长岗位职责
2014/03/02 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
工商干部先进事迹
2014/05/14 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android