用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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
使用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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python简单实例训练(21~30)
2017/11/15 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python中return函数返回值实例用法
2020/11/19 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
2019年.net常见面试问题
2012/02/12 面试题
大学毕业感言100字
2014/02/03 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
联欢会开场白
2015/06/01 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers