整体刷新和局部刷新frameset窗口问题深入探讨_模板无忧
整体刷新和局部刷新frameset窗口问题深入探讨_JSP教程
推荐：jsp超链接中文乱码的解决方法，需要的朋友可以参考一下在项目中，经常会遇到页面分割，最常见的系统或网站的主界面。主页面分为，上面系统简介、下面作者简介、左边系统功能、右边则是菜单真正展示的界面。遇到这种这种分割页面，大家首先想到是frameset，使用framset分割多种frame，这种方式简单。若是不喜欢使用framset，喜欢前台设计的人也许会选择div拼接，浮动，这就考查样式的功底了。 这次主要讲解局部刷新的问题。需求是：左边frame，右边frame。 大家肯定疑问，这样刷新没有问题啊。的确如此。现在使用framset，分割两frame，各自更新各自。右边frame展示菜单尽管更新提交即可。对左边frame是没有影响的。为了方便理解，左边Frame简称LeftFrame，右边Frame简称RightFrame；假如我提交RightFrame页面，需要更新LeftFrame【动态】页面。那如何办呢？ 其实就是从数据库中重新读数据； 复制 代码如下: &FRAMESETcols="280,*"frameborder=yesbordercolor=silver& &FRAMESRC="modifyMenu!showTreeMenu"NAME="menuTree"SCROLLING="No"id="leftTree"& &FRAMESRC="showModifyMenu."NAME="main"SCROLLING="AUTO"id="showModifyMenu"& /FRAMESET&
其中modifyMenu!showTreeMenu是转向到tree.jsp页面 现在项目中，前台使用struts2，当提交右边页面数据时，当时设想：然后再次跳转到主界面，相当于重新读取数据，但是加载的主界面竟然是显示在右边区域，这样就成了两个LeftFrame。即使更改Struts2中的resultType的重定向也不可以。最后，竟然一个简单的JS解决问题。 在提交右边页面RightFrame，使用JS更新左边LeftFrame。如下： 在rightFrame中的body的onload的事件： 复制代码 代码如下: functioninit(){ //leftTree是左边Frame的id //重新加载这个页面 window.parent.frames["leftTree"].location.reload(); }
window.parent.frames["leftTree"].location.reload() 当时你在某一个思路上山穷水尽的时候，可以尝试换种思路，也是会柳暗花明. 需求如下：若刷新右边RightFrame页面，只刷新部分左边LeftFrame【刷新某个div】。 提到局部部分刷新，肯定想到是Ajax局部刷新。 那我们用纯js的Ajax基础实现： 复制代码 代码如下: functioncreateXmlHttpRequest(){ if(window.XMLHttpRequest){ returnnewXMLHttpRequest(); }elseif(window.ActiveXObject){ returnnewActiveXObject("Microsoft.XMLHTTP"); } } functioninit(){ //则进行局部刷新 varHttpReq=createXmlHttpRequest(); //获得出发的url的，比如struts2的action或者servlet或jsp页面 varurl="success.jsp"; xmlHttpReq.open("GET",url,true); //因为你在作一个异步调用， //所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器 xmlHttpReq.onreadystatechange=function(){ if(xmlHttpReq.readyState==4){ if(xmlHttpReq.status==200){ //使用parent获得左边页面中的某一个div，然后更改展示的外观 window.parent.frames["leftTree"].document.getElementById(divId).innerHTML="测试"; }else{ alert(xmlHttpReq.status+xmlHttpReq.responseText); } } }; xmlHttpReq.send(null); }
window.parent.frames["leftTree"].document.getElementById(divId).innerHTML=xmlHttpReq.responseText 后台action中的写法如下： 复制代码 代码如下: 01.HttpServletResponseresponse=ServletActionContext.getResponse(); response.setContentType("text/charset=utf-8"); out=response.getWriter(); out.int("从后台传入的数据");
两种刷新方式，一种整体刷新；一种局部刷新；分享：输入的字符判断是否为0-9，采用for循环实现，感兴趣的朋友可以参考下哈，希望可以帮助到你
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
相关JSP教程：
编程教程搜索
JSP教程推荐
猜你也喜欢看这些您现在的位置：&&>>&&>>&&>>&&>>&正文
struts页面跳转和局部刷新配置的五种方式
　　1:ajax json配置：
　　structs.xml
　　&PACKAGE name="json" namespace="/" extends="json-default"&
　　&RESULT name="success" type="json"&
　　&PARAM name="root"&dataMap&/PARAM&
　　&/RESULT&
　　&/ACTION&
　　&/PACKAGE&
　　LoginAction.java
　　dataMap.put（"user", user）；
　　dataMap.put（"success", true）；
　　return SUCCESS;
　　这个是页面局部刷新，&PARAM&这个标签是设置参数的，对于java程序来说，这个标签就相当于定义一个root 变量，将其赋值为dataMap ,前台可以获取使用root这个参数值
　　前台调用
　　$.ajax（{
　　url : "",
　　type : 'post',
　　success : function（data） {
　　（）；
　　2:dispatcher 默认配置跳转（页面转发）
　　&RESULT name="success"&/main.jsp&/RESULT&
　　其完整格式为
　　&RESULT name="success" type="dispatcher"&
　　&PARAM name="location"&/main.jsp&/PARAM&
　　&/RESULT&
　　页面跳转过程一直是同一个线程，Action中的数据一直保存在。
　　location只能是页面，不能是另一个action（可用type="chain"解决，下面第4会介绍）。
　　3:redirect 类型用于重定向到一个页面，另一个action或一个网址。
　　&RESULT name="success" type="redirect"&aaa.jsp&/RESULT&
　　缺点：redirect把一个http返回码（SUCCESS）以及返回的页面位置一起重新发给web，容纳后由web产生一个新的HTTP请求，就会产生一个新的线程，保存在原来Action执行的线程中的数据就无法访问。
　　所以，result需要包含Action的数据，那么redirect不是一个可行的办法。因为新的HTTP请求时在Servlet容器的新的线程中处理的，ActionContext中的所有状态都不会存在。
【责编:ivy】
没有相关文章
?&[]?&[]?&[]?&[]?&[]?&[]?&[]?&[]?&[]?&[]
相关产品和培训
　友情推荐链接
　认证培训
　专题推荐
　?　?　?　?　?　?　?　?　?　?
　今日更新
?&?&?&?&?&?&?&?&?&?&
　社区讨论
　博客论点
　频道精选
　Java 频道导航& 通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象， JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
&&&& AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
&&&& 实验中利用JSP+ajax来实现自动刷新页面，并读/写数据库中的数据。
&&& 下面介绍一下利用JSP+ajax来实现局部页面刷新的小例子：
处理ajax请求的jsp文件：ajax.jsp
&%@ page contentType="text/ charset=gb2312" %&
//设置输出信息的格式及字符集
response.setContentType("text/ charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
out.println("&response&");
for(int i=0;i&2;i++){
out.println("&name&"+(int)(Math.random()*10)+
"号传感器&/name&");
out.println("&count&" +(int)(Math.random()*100)+ "&/count&");
out.println("&/response&");
out.close();
发送ajax请求的jsp文件：zx.jsp
&META http-equiv=Content-Type content="text/ charset=gb2312"&
&script language="javascript"&
var XMLHttpR
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
else if (window.ActiveXObject) { // IE浏览器
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var url = "ajax.jsp";
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processR//指定响应函数
XMLHttpReq.send(null);
// 发送请求
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
DisplayHot();
setTimeout("sendRequest()", 1000);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
function DisplayHot() {
var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeV
var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeV
document.getElementById("product").innerHTML =
document.getElementById("count").innerHTML =
&body onload =sendRequest()&
&table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200
bgColor=#f5efe7 border=0&
&TD align=middle bgColor=#dbc2b0 height=19 colspan="2"&&B&无线传感网&/B& &/TD&
&td height="20"& 传感器：&/td&
&td height="20" id="product"& &/td&
&td height="20"&传感器个数：&/td&
&td height="20" id="count"& &/td&
& 效果如下（页面上的值自动变化）：
阅读(...) 评论()2012年2月 Web 开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
JSP页面设计有关问题…怎么只刷新部分页面？
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口