用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调试说明
Jun 07 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
基于javascript编写简单日历
May 02 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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中单引号与双引号的区别分析
2014/08/19 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
Javascript之String对象详解
2016/06/08 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
python文件和目录操作函数小结
2014/07/11 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
希特勒的演讲稿
2014/05/23 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js