用Jquery.load载入页面实现局部刷新

因为开始不懂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>

希望对你有帮助

赞 (0)

相关推荐

  • JSP中include指令和include行为的区别

    < %@ include file=" "%> < jsp:include page=" " flush="true"/> 前者是指令元素.后者是行为元素.具体它们将在何处用?如何用及它们有什么区别?这应该是很多人看到它都会想到的问题.下面一起来看看吧. 通常当应用程序中所有的页面的某些部分(例如标题.页脚和导航栏)都相同的时候,我们就可以考虑用include.具体在哪些时候用< %@ include file=&q

  • JSP下动态INCLUDE与静态INCLUDE的区别分析

    动态INCLUDE     用jsp:include动作实现 <jsp:include page="included.jsp" flush="true" />它总是会检查所含文件中的变化,适合用于包含动态页面,并且可以带参数. 静态INCLUDE    用include伪码实现,定不会检查所含文件的变化,适用于包含静态页面<%@ include file="included.htm" %> ================

  • 详谈jQuery.load()和Jsp的include的区别

    1.jqueryObj.load() load()方法通过ajax获取服务端数据,并将放回数据放置到jqueryObj对象下. load(url,data,function(response,status,xhr) 参数 描述 url 规定要将请求发送到哪个 URL. data 可选.规定连同请求发送到服务器的数据. function(response,status,xhr) 可选.规定当请求完成时运行的函数. 额外的参数: response - 包含来自请求的结果数据 status - 包含请

  • JSP中的include有几种形式？都有什么区别？

    JSP中的include有哪些?有什么区别? 1.JSP中的include有哪些 (1)<%@include file="" %> (2)<jsp:include page="" flush="true"/> 2.两者区别 (1)前者是指示元素,后者是行为元素 (2)前者合成一个页面,后者合成一个文件后被JSP容器转化成Servlet

  • jQuery中Ajax的load方法详解

    先来看一个Ajax例子 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body> <input type="button" value="Ajax提交" onc

  • 用Jquery.load载入页面实现局部刷新

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • 用Jquery.load载入页面后样式没了页面混乱的解决方法

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • JQuery的Ajax请求实现局部刷新的简单实例

    JQuery的Ajax请求实现局部刷新的简单实例

    请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

  • Vue实现页面的局部刷新(router-view页面刷新)

    Vue实现页面的局部刷新(router-view页面刷新)

    利用Vue里面的provide+inject组合 首先需要修改App.vue. <template> <!-- 公司管理 --> <div class="companyManage"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default {

  • 基于jQuery捕获超链接事件进行局部刷新代码

    基于jQuery捕获超链接事件进行局部刷新代码

    核心代码: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>A Click Event Test</title> <script type="text/javascript" src="jquery.min.js"

  • jQuery实现页面倒计时并刷新效果

    下面一段代码给大家分享基于jquery实现的页面倒计时并刷新效果,代码如下所示: var intDiff = parseInt(600);//倒计时总秒数量 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = M

  • Flutter StreamBuilder实现局部刷新实例详解

    Flutter StreamBuilder实现局部刷新实例详解

    目录 前言 StreamBuilder 简介 StreamBuilder的实际应用 总结 前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作. 包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求.有兴趣了解StatefulBuild

  • Flutter StatefulBuilder实现局部刷新实例详解

    Flutter StatefulBuilder实现局部刷新实例详解

    目录 前言 页面的全量刷新 StatefulBuilder简介 StatefulBuilder的实际应用 总结 前言 flutter项目中,在页面数据较多的情况下使用全量刷新对性能消耗较大且容易出现短暂白屏的现象,出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新操作. GlobalKey.ValueNotifier和StreamBuilder等技术方案都可以实现Flutter页面的局部刷新,本文主要记录的是通过StatefulBuilder组件来实现局部刷新的方法. 页

  • Flutter StreamBuilder组件实现局部刷新示例讲解

    Flutter StreamBuilder组件实现局部刷新示例讲解

    目录 一.前言 二.StreamBuilder 简介 三.StreamBuilder的实际应用 总结 一.前言 在flutter项目中,页面内直接调用setState方法会使得页面重新执行build方法,导致内部组件被全量刷新,造成不必要的性能消耗.出于性能和用户体验方面的考虑我们经常会使用局部刷新代替全量刷新进行页面更新的操作.包括Provider.ValueNotifier和StatefulBuilder等在内的技术方案,都能够帮助我们实现Flutter局部刷新的需求. 本文记录的是通过St

  • 使用jquery局部刷新(jquery.load)从数据库取出数据

    使用jquery局部刷新(jquery.load)从数据库取出数据

    因为Jquery 是一个很好的javascript框架,我对他的运用还只是表面的,处于一个初步学习的阶段,所以通过博客记录我学习的点滴,大神可以略过,写此文章希望可以帮到和我一样的初学者,共同分享,共同进步. 现在ajax越来越受到web开发者的青睐,jquery提供了很好的ajax交互,我这里用的是直接返回字符串,用的是jquery.load方法,是很基础的. 项目下载 需要注意两点: 1.jquery.js的路径要正确,不然很难达到你想要的效果. 2.需要使用$(document).read

随机推荐