ECShop模板中如何实现局部刷新

js控制iframe的刷新（页⾯局部刷新）今天遇到个问题，后台会员审核之后，页⾯内的会员审核状态要及时改变，但⼜不能指望⽤户⼿动刷新（⽤户体验很不好）如果审核页⾯和显⽰审核状态时同在⼀个html页⾯的话，那么直接⽤js改变div内部的⽂本就可以了，像下⾯这样：$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("Dolly Duck");});但是，后台页⾯的布局是这样的：这画的应该不难看出来吧，不过我还是要说明⼀下；⼀个html中包含⼀个iframe1，点击这个iframe1中的某个字段，会跳出⼀个模态框（⽤于审核的div2），审核结束后提交信息，点击button ok，此时数据提交到接⼝并进⾏了⼀系列操作（此处省略具体操作），然后div2窗⼝关闭，这个时候iframe1中的某些字段应该做出改变，⽐如，之前审核状态是“未审核”，在div2审核操作了之后，此时的状态应该变为“已审核”，⽤户希望的是，在点击了button按钮之后，状态⽴即刷新，那么我们应该在提交数据到接⼝，成功之后做出点什么来改变这个状态，但是上⾯说了，直接⽤js获取iframe1中的标签改变其值是⾏不通的，所以我们可以这么做：function check_pass(uid) {$.ajax({type: "GET",url: siteurl,dataType: "json",data:{"c":"api","m":"checkpass","uid":uid},success: function(text) {var _body = window.parent;var _iframe1=_body.document.getElementById('rightMain');_iframe1.contentWindow.location.reload(true);}});}这个函数是在button点击的时候执⾏的，button是存在于div2中的，发起ajax请求向接⼝提交数据之后，我们来看请求成功之后的代码：var _body = window.parent;--------------------获取这个div2的⽗级窗⼝，那么⾃然是这个body了；var _iframe1 = _body.document,getElementById('rightMain');-------------------根据id获取iframe1这个对象；_iframe1.contentWindow.location.reload(true);-----------------------看到reload就该知道是刷新了这个iframe1了。

ECSHOP 模板结构说明(适用版本v2.1.5+)名称类型备注（作用或意义）文件(目录)名可否更改images 目录存放模板图片目录不可更改library 目录存放模板库文件目录不可更改screenshot.png 图片用于“后台管理-> 模板管理-> 模板选择”显示模板缩略图。

不可更改style.css css样式表不可更改备注：模板文件共32个(格式：.dwt)。

提醒：1, 更改模板文件里面库文件的内容是无效的，页面刷新时，程序自动重新载入库文件内容到模板文件里(以库文件内容为准)。

2, 模板内所有id值为ECS_ 开头的都必须保留(和ajax相关)。

3, 非库文件内容不可放置到可编辑区域内，否则设置模板时，非库文件内容将被覆盖删除。

activity.dwt 模板文件活动列表页不可更改article.dwt 模板文件文章内容页不可更改article_cat.dwt 模板文件文章列表页不可更改article_pro.dwt 模板文件文章内容页(如免责声明等) 不可更改auction.dwt 模板文件拍卖商品详情页不可更改auction_list.dwt 模板文件拍卖商品页不可更改brand.dwt 模板文件商品品牌页不可更改brand_list.dwt 模板文件商品品牌列表页不可更改catalog.dwt 模板文件所有分类页不可更改category.dwt 模板文件商品列表页不可更改compare.dwt 模板文件商品比较页不可更改flow.dwt 模板文件购物车和购物流程页不可更改gallery.dwt 模板文件商品相册页不可更改goods.dwt 模板文件商品详情页不可更改group_buy_goods.dwt 模板文件团购商品详情页不可更改group_buy_list.dwt 模板文件团购商品列表页不可更改index.dwt 模板文件首页不可更改message.dwt 模板文件信息提示页不可更改message_board.dwt 模板文件留言板页不可更改myship.dwt 模板文件我的配送页不可更改pick_out.dwt 模板文件选购中心页不可更改quotation.dwt 模板文件报价单页不可更改receive.dwt 模板文件收货确认信息页不可更改respond.dwt 模板文件在线支付结果提示信息页不可更改search.dwt 模板文件商品搜索页不可更改snatch.dwt 模板文件夺宝奇兵页不可更改tag_cloud.dwt 模板文件标签云页不可更改topic.dwt 模板文件专题前台页不可更改user_clips.dwt 模板文件用户中心页（包含：欢迎页，我的留言，我的标签，收藏商品，缺货登记列表，添加缺货登记。

妙⽤Ajax技术实现局部刷新商品数量和总价实例代码1. 问题的分析 先看⼀下页⾯中的情况： 功能如上，在没有Ajax之前，⼀般都是根据⽤户修改的值去找Action，然后返回新的jsp页⾯重新加载整个页⾯，完成数字的更新。

但是有了Ajax技术后，我们可以利⽤Ajax技术局部刷新要改变的地⽅，⽽不是重新加载整个页⾯。

⾸先看⼀下上图对应的jsp部分的代码：<div class="section_container"><!-- 购物车 --><div id="shopping_cart"><div class="message success">我的购物车</div><table class="data-table cart-table" cellpadding="0" cellspacing="0"><tr><th class="align_center" width="10%">商品编号</th><th class="align_left" width="35%" colspan="2">商品名称</th><th class="align_center" width="10%">销售价格</th><th class="align_center" width="20%">数量</th><th class="align_center" width="15%">⼩计</th><th class="align_center" width="10%">删除</th></tr><c:forEach items="${sessionScope.forder.sorders }" var="sorder" varStatus="num"><tr lang="${sorder.product.id}"><td class="align_center"><a href="#" class="edit">${num.count }</a></td><td width="80px"><img src="${shop}/files/${sorder.product.pic}" width="80" height="80" /></td><td class="align_left"><a class="pr_name" href="#">${ }</a></td><td class="align_center vline">${sorder.price }</td><td class="align_center vline"><!-- ⽂本框 --><input class="text" style="height: 20px;" value="${sorder.number }" lang="${sorder.number }"></td><td class="align_center vline">${sorder.price*sorder.number }</td><td class="align_center vline"><a href="#" class="remove"></a></td></tr></c:forEach></table><!-- 结算 --><div class="totals"><table id="totals-table"><tbody><tr><td width="60%" colspan="1" class="align_left"><strong>⼩计</strong></td><td class="align_right" style=""><strong>￥<spanclass="price" id="total">${sessionScope.forder.total}</span></strong></td></tr><tr><td width="60%" colspan="1" class="align_left">运费</td><td class="align_right" style="">￥<span class="price" id="yunfei">0.00</span></td></tr><tr><td width="60%" colspan="1" class="align_left total"><strong>总计</strong></td><td class="align_right" style="">￥<span class="total" id="totalAll"><strong>${sessionScope.forder.total}</strong></span></td></tr></tbody></table><div class="action_buttonbar"><font><a href="${shop}/user/confirm.jsp"><button type="button" title="" class="checkout fr" style="background-color: #f38256;">订单确认</button></a></font><font><a href="#"><button type="button" title="" class=" fr"><font>清空购物车</font></button></font><a href="${shop}/index.jsp"><button type="button" title="" class="continue fr"><font>继续购物</font></button></a><div style="clear:both"></div></div></div></div> 看着貌似很多的样⼦，其实功能很简单，就是从域中拿出相应的数据显⽰出来⽽已，我们现在要实现上⾯描述的功能的话，先来分析⼀下思路：⾸先得注册⼀个事件：即修改了数量那⾥的⽂本框触发的事件；在该事件中，我们拿到⽤户输⼊的数，判断输⼊的合法性，因为要防⽌⽤户乱输⼊；如果合法，通过Ajax请求将数据发送到后台；后台针对新的数量，调⽤相应的业务逻辑⽅法得到新的结果，并将其通过流返回到前台；Ajax收到结果后，再对相应位置的数据进⾏更新。

jQuery页⾯刷新（局部、全部）问题分析本⽂实例分两部分对jquery刷新问题进⾏介绍，第⼀部分介绍了呢页⾯局部刷新；第⼆部分介绍了页⾯全部刷新第⼀：页⾯局部刷新jQuery对Ajax操作进⾏了封装，在jQuery中$.ajax()⽅法属于最底层的⽅法，第2层是laod()、$.get()和$.post()⽅法，第3层是$.getScript()和$.getJSON()⽅法。

重点分析load()⽅法通常⽤来从Web服务器上获取静态的数据⽂件.要传递⼀些参数给服务器中的页⾯，那么可以使⽤$.get()或者$.post()⽅法$.ajax⽅法load() Code//⽆参数传递，则是GET⽅式$("#resText").load("test.php",function(){//......});//有参数传递，则是POST⽅式$("#resText").load("test.php",{name:"xht555",age:"24"},function(){//......});简单说⼀下 post 与get 区别：get：⽤get⽅式可传送简单数据（即：浏览器将各个表单字段元素及其数据按照URL参数的格式附加在url后⾯），但⼤⼩⼀般限制在1KB下；被客户端的浏览器缓存起来，不安全。

post：览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，⽽不是作为URL地址的参数进⾏传递， 总结：⼀：GET⽅式传送数据量⼩，处理效率⾼，安全性低，会被缓存，⽽POST反之。

　⼆：AJAX乱码问题产⽣乱码的原因:1、xtmlhttp 返回的数据默认的字符编码是utf-8，如果客户端页⾯是gb2312或者其它编码数据就会产⽣乱码2、post⽅法提交数据默认的字符编码是utf-8，如果服务器端是gb2312或其他编码数据就会产⽣乱码解决办法有：1、若客户端是gb2312编码，则在服务器指定输出流编码2、服务器端和客户端都使⽤utf-8编码gb2312:header('Content-Type:text/html;charset=GB2312');utf8:header('Content-Type:text/html;charset=utf-8');注意:如果你已经按上⾯的⽅法做了，还是返回乱码的话,检查你的⽅式是否为get,对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经 encodeURIComponent⽅法处理.如果没有⽤encodeURIComponent处理的话,也会产⽣乱码　$.post() Code//$.post()⽅式：$('#test_post').click(function (){$.post('ajax_json.php',{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},function (data) //回传函数{var myjson='';eval('myjson=' + data + ';');$('#result').html("姓名:" + ername + "<br/>⼯作:" + myjson['job']);});});$.get() Code//$.get()⽅式：$('#test_get').click(function (){$.get('ajax_json.php',{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},function(data) //回传函数{var myjson='';eval("myjson=" + data + ";");$('#result').html("姓名:" + ername + "<br/>⼯作:" + myjson['job']); });});});$.getJson(”Default.php”, {id:”1″, page: “2″ },function(data){//注意，这⾥返回的JSON数据格式，不同于xml.});第⼆：页⾯全部刷新1 window.location.reload()刷新当前页⾯.2 parent.location.reload()刷新⽗亲对象（⽤于框架）3 opener.location.reload()刷新⽗窗⼝对象（⽤于单开窗⼝）4 top.location.reload()刷新最顶端对象（⽤于多开窗⼝）以上就是本⽂的详细内容，希望对⼤家的学习有所帮助。

JSP Ajax 实现Web页面的局部动态更新
在浏览网页时，往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。

传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。

但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。

本实例演示使用Ajax技术局部动态更新数据。

练习要点：
创建MySQL数据库，名称为test。

数据库中创建表person，表字段信息如表9 -2所示：
创建数据库连接类，打开记事本创建DB.java，代码如下：
现在建立客户端程序。

打开记事本，新建一个名为index5.jsp的页面，代码如
创建一个JSP页面来处理客户端发送的请求，该文件实现删除功能。

打开记事本，新建一个名为index5_server.jsp的文件，代码如下所示：
下面代码判断客户端请求参数，如果不为空，则执行删除操作。

然后从数据库中取出数据，以XML格式返回给客户端。

把本实例部署到Tomcat服务器上后，打开index5.jsp页面，如图9-7所示。

图9-7 局部刷新
单击【删除】，可以看到整个页面并未刷新，只是局部更新。

页面显示如图9-8
所示：
图9-8 删除操作。

jqueryajaxthinkphp异步局部刷新完整流程环境：ThinkPHP3.2.3，jQuery3.2前⾔：在⼀般的⽹站中，都需要⽤到jquery或者其他框架（⽐如angular）来处理前后端数据交互，thinkphp在后台也内置了⼀些函数⽤于数据交互（⽐如ajaxReturn()）。

本⽂的⽬的是打通使⽤ajax在jquery和thinkphp之间的前后端数据交互过程。

正⽂：⼀、thinkphp关于ajax的介绍1.1 ajaxReturn：\Think\Controller类提供了ajaxReturn⽅法⽤于AJAX返回数据给客户端（视图、模板、js等）。

并且⽀持JSON、JSONP、XML和EVAL四种⽅式给客户端接受数据（默认JSON）。

（链接：）配置⽅式：convention.php中定义了默认编码类型为DEFAULT_AJAX_RETURN => 'JSON',分析：ajaxReturn()调⽤了json_encode()将数值转换成json数据存储格式，常⽤的数值是数组。

注意：The value being encoded can be any type except a resource(资源⽂件).All string data must be UTF-8 encoded.（链接：）举例：$data['status'] = 1;$data['content'] = 'content';$this->ajaxReturn($data);1.2 请求类型：系统内置了⼀些常量⽤于判断请求类型，⽐如：常量说明IS_GET 判断是否是GET⽅式提交IS_POST 判断是否是POST⽅式提交IS_PUT 判断是否是PUT⽅式提交IS_DELETE 判断是否是DELETE⽅式提交IS_AJAX 判断是否是AJAX提交REQUEST_METHOD 当前提交类型⽬的：⼀⽅⾯可以针对请求类型作出不同的逻辑处理，另外⼀⽅⾯可以过滤不安全的请求。

ASP .NET AJAX在一个Ajax网页应用程序中的关键技术是局部刷新。

伴随着局部刷新，整个网页不需要回发，浏览器也不需要刷新。

取而代之的是，当触发事件时，网页通过访问web服务器获取信息。

因为http请求在后台执行，所以网页能持续响应。

(假如你觉得请求需要一段时间，那么你可以使用某些进度条，这个是由你自己决定的。

)当页面接收到响应结果时，仅更新网页中改变了的部分，如图1所示图1 普通的服务器端页面与Ajax包含了一个便利的控件，该控件通过使用局部更新让你可以制作一个有后台逻辑的普通页面并确保其以无闪烁的Ajax风格刷新自己。

（译注：也就是说，通过局部更新可以让你在刷新页面的时候没有闪烁）。

该控件就是第 1 页(共8 页)UpdatePanel，最基本的原理就是你将你的网页分割成一个或多个独立的区域，每个被包裹在一个不可见的UpdatePanel中。

当一个放置于UpdatePanel中的控件的事件被触发，并且该事件通常会引起整页回传时，UpdatePanel会截断该事件并且使用异步回调来代替。

下面这个例子可以解释以上论述：1.用户点击UpdatePanel里的一个按钮。

2.UpdatePanel捕获到客户端点击， AJAX执行回调到服务器端，而不是把整个页面回传。

3.在服务器端，按照正常页面生命周期执行所有事件。

最后呈现html页面并返回到客户端。

AJAX为页面上的每个UpdatePanel接收html，客户端脚本开始刷新页面，使用新内容替换每个UpdatePanel中的原内容。

（如果UpdatePannel 中的内容未发生改变，则忽略）一个简单的UpdatePanel测试为了使用UpdatePanel，比较合理的做法是创建一个简单的测试页面。

以下的案例（图片2）使用了一个包含两个素材的简单页面：一张动态gif图片以及一个显示当前时间并包含一个刷新时间的按钮的灰色文本框。

当你单击刷新时间按钮，该页面从服务端获取当前时间并更新标签。

ECShop是Comsenz公司推出的一款B2C独立国内知名网店系统，适合企业及个人快速构建个性化网上商店。

系统是基于PHP语言及MYSQL数据库构架开发的跨平台开源程序。

下面虚机屋网络（）为大家介绍下ecshop后台商店设置基本使用说明。

在网店后台-> 系统设置-> 商店设置（下图）里，我们可以完成商店的几乎所有的设置，包括的设置有网店信息基本设置、显示设置、购物流程、商品显示设置、短信设置、W AP 设置等，这个部分可以说是ECShop 网店系统的核心配置。

一、网店信息基本设置：如图 2 、3图2图3图4图5图6图7图8商店名称:写上网店的名字即可；商店标题:填写的内容是用来显示在浏览器的标题栏里，也可以起到一定的搜索引擎优化的作用；商店描述及商店关键字:填写的内容可以起到一定的搜索引擎优化的作用；商店地址及联系帐号信息：填写后可以显示在前台页面的页脚，如图4 ，如果您有多个客服的QQ 号码、淘宝旺旺号码、Skype 号码等等客服帐号，请在每个号码之间使用半角逗号（,）分隔。

二、基本设置：如图9、10、11图9图10图11图12图13水印透明度:水印的透明度，可选值为0-100。

当设置为100时则为不透明。

市场价格比例: 输入商品售价时将自动根据该比例计算市场价格URL重写: URL重写是一种搜索引擎优化技术，可以将动态的地址模拟成静态的HTML 文件。

需要Apache 的支持。

消费积分名称:您可以将消费积分重新命名。

例如：烧币积分换算比例:每100积分可抵多少元现金积分支付比例:每100元商品最多可以使用多少元积分统计代码:您可以将其他访问统计服务商提供的代码添加到每一个页面。

缓存存活时间（秒）:前台页面缓存的存活时间，以秒为单位。

是否启用Gzip 模式:启用Gzip 模式可压缩发送页面大小，加快网页传输。

需要php 支持Gzip。

如果已经用Apache 等对页面进行Gzip 压缩，请禁止该功能。

Ajax实现局部刷新的⽅法实例⽬录前⾔⼀、 Ajax是什么？⼆、实现⽅式：1.原⽣的JS实现⽅式（了解）2.JQeury实现⽅式⼩栗⼦总结前⾔最近复习了⼀下jQuery的⼀些内容，特此整理⼀下⼀些能⽤的得到的知识点，以前才学jQuery的时候压根就没有注意到那么多的细节，另外最近⼀直都在整理前端的⼀些⼯作中学到的⼩经验，⼤概还会有⼗篇左右的内容，就会慢慢开始整理后端，框架，以及数据库的⼀些⼩知识点⼀、 Ajax是什么？概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML1、异步和同步：客户端和服务器端相互通信的基础上-> 客户端必须等待服务器端的响应。

在等待的期间客户端不能做其他操作。

->客户端不需要等待服务器端的响应。

在服务器处理请求的过程中，客户端可以进⾏其他的操作2、Ajax 是⼀种在⽆需重新加载整个⽹页的情况下，能够更新部分⽹页的技术。

->通过在后台与服务器进⾏少量数据交换，Ajax 可以使⽹页实现异步更新。

这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。

-> 传统的⽹页（不使⽤ Ajax）如果需要更新内容，必须重载整个⽹页页⾯。

⼆、实现⽅式：1.原⽣的JS实现⽅式（了解）javascript代码如下（⽰例）：//javascript代码var xmlhttp;//1.创建核⼼对象if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2. 建⽴连接/* 参数：1. 请求⽅式：GET、POST* get⽅式，请求参数在URL后边拼接。

ecshop不用后台更新缓存同样可实现前台的刷新1、首先修改数据库结构进入 ECShop后台 ==》数据库管理 ==》SQL查询输入下面SQL语句，提交，注意要把表前缀更改为你自己的。

我这里使用的是默认表前缀ecs_。

INSERT INTO `ecs_shop_config` VALUES (1021, 10, 'last_clear_time', 'text', '', '', '1332808200', 1);注：1332808200这个是数据库存储的时间戳，对应于2012-03-27 08:30:00，到后台更新下缓存，它会自动变更的。

1021这个值也是可以改的，但是不建议少于1000 如果少于1000，可能对其他值会产生影响。

2、打开 includes/init.php 这个文件在文件的最后添加如下代码：// 自动更新缓存if (is_temps()){clear_all_files();$sql="UPDATE ".$ecs->table('shop_config') ."SET value=".time()." WHERE code='"."last_clear_time'";$db->query($sql);}function is_temps(){if(time()-$_CFG['last_clear_time']<3600){return(false);}else{return(true);}}上面代码中的3600为自动更新间隔时间，单位为秒;注：如果嫌上面的方法麻烦，可以先显示页面的php代码中在php结束符?>之前加上一句话“clear_all_files();”，这个是每次都清空缓存，不建议使用文章转载：前一篇：ecshop 函数汇总后一篇：根据IP 即可获得用户所在的地区。

浅析PHP页⾯局部刷新功能的实现⼩结⽅法其实挺多的。

以前⽐较常⽤的是iframe这样来做。

现在多了个ajax，所以⼀般情况下都是⽤的ajax。

当然，ajax使⽤起来确实很简单就可以实现，但是⾥⾯的很多知识还是⽐较有点深的。

我之前做页⾯时间⾃动刷新的功能就是⽤的ajax。

完整代码是：复制代码代码如下:<?phpheader("cache-control:no-cache,must-revalidate");header("Content-Type:text/html;charset=utf-8");$time = "2012-1-20 18:00:00";$dt_element=explode(" ",$time);$date_element=explode("-",$dt_element[0]);$time_element=explode(":",$dt_element[1]);$date = mktime($time_element[0],$time_element[1],$time_element[2],$date_element[1],$date_element[2],$date_element[0]); $nowTime = time();$showtime = date("北京时间Y年m⽉d⽇H:i:s",$date-$nowTime);if($showtime<="北京时间1970年01⽉01⽇08:00:00"){echo "happy new year";}echo $showtime;复制代码代码如下:</head><body><h1>Ajax动态显⽰时间</h1><input type="button" value="开始显⽰时间" id="go" onclick="start()" /><p>当前时间：<font color="red"><span id="showtime"></span></font></p></body><script type="text/javascript">var xmlHttp;function createXMLHttpRequest(){if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}function start(){createXMLHttpRequest();var url="getTime.php";xmlHttp.open("GET",url,true);xmlHttp.onreadystatechange = callback;xmlHttp.send(null);}function callback(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200){document.getElementById("showtime").innerHTML = xmlHttp.responseText;setTimeout("start()",1000);}}}</script></html>在浏览器⾥⾯直接访问zidong.php就可以了，点击⾥⾯的按钮就可以看到效果。

jQuery实现AJAX定时刷新局部页⾯实例⽅法⼀：局部刷新我们讲述到最多的是ajax 了，当然也可以不使⽤ajax来刷新页⾯了，我们可以使⽤jquery中的append来给指定内容加东西了，当然最实⽤的还是ajax加载数据了。

例⼦，定时局部刷新定时局部刷新⽤到jQuery⾥⾯的setInterval⽅法，setInterval⽅法两个参数，第⼀个是设置定时执⾏的函数名，第⼆个是时间，如下代码所⽰，设置每隔10微秒定时执⾏⼀次aa⽅法。

<script>$(function(){setInterval(aa,10);function aa(){$("#aa").append("fdsadfsa");}})</script>例⼦2<head><script src="jQuery/jquery-1.4.1.min.js" type="text/javascript"></script><script>$(document).ready(function () {setInterval("startRequest()",1000);});function startRequest(){$("#date").text((new Date()).toString());}</script></head>例⼦3 下⾯我们就看⼀下这种刷新⽅式是如何实现的。

jsp页⾯ajax$("#waitWork").click(function(){var url = "请求地址";var data = {type:1};$.ajax({type : "get",async : false, //同步请求url : url,data : data,timeout:1000,success:function(dates){//alert(dates);$("#mainContent").html(dates);//要刷新的div},error: function() {// alert("失败，请稍后再试！");}});});html<div id="mainContent">注意：后台需要针对div⾥的信息单独⽤⼀个jsp页⾯，不然就需要⾃⼰封装好需要的页⾯信息返回⽅法⼆：不时，我需要某种机制，不断刷新⽹页，以提供⼀个实时的仪表板某种。

⽤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>希望对你有帮助。