用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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
JavaScript版代码高亮
2006/06/26 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
pandas的qcut()方法详解
2019/07/06 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python中取绝对值简单方法总结
2020/07/24 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
网上签名寄语活动留言
2014/01/18 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
2014年创卫实施方案
2014/02/18 职场文书
《花木兰》教学反思
2014/04/09 职场文书
招标授权委托书样本
2014/09/23 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
PHP基本语法
2021/03/31 PHP
JS的深浅复制详细
2021/10/16 Javascript