iframe提交action处理后刷新父页面&在action中控制页面刷新

最新推荐文章于 2023-12-12 22:18:37 发布
原创 最新推荐文章于 2023-12-12 22:18:37 发布 · 516 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JSP

本文介绍了一种在iframe内部操作后刷新外部父页面的方法，通过JavaScript实现双击更改头像后的页面即时更新效果。
最近用到一个小功能，即双击相册列表中的照片时，把此照片设为头像，由于我用的是iframe，所以在action处理过后返回的jsp页面不能达到父页面的刷新。 IPictureMgr pictureMgr = (IPictureMgr) getBean("pictureMgr"); List result = pictureMgr.get(username); req.setAttribute("result", result); req.setAttribute("filepath", filepath); return mapping.findForward("add"); 如果这样的话每次只能手动刷新整个页面才能实时显示修改的头像，如果想刷新父页面，只需要在script中做如下处理： function aaaa(i,filename){ alert(i); var filepath = document.getElementById("picture"+i).value; alert(filepath); window.location.href ='pictures.do?method=sethead&filepath='+filepath+'&filename='+filename; parent.location.reload();//刷新父页面 } 这是双击事件function
刷新action避免重复提交
12-16
防止提交 在用struts2.0标签开发中,经常要使用form提交.在点击"提交"后,我们通常会弹出一个提示信息的页面,用户此时有可能会按f5刷新当前提交的action,从而将多个相同的数据保存到了后台数据库,并且造成了潜在的安全危险! 避免重复提交呢?
js实现表单提交后不重新刷新当前页面
12-29
如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'> 　<input type=button id=btnSubmit name=btnSubmit value=保存 onclick=addKp() ...
模态窗口提交action直接返回父页面
besideyou_love的专栏
09-24 1328
(1)父页面调用模态窗口的方法和设置付页面的重新加载时间方法 //模态窗口   function execlImport(){               var feature = "dialogWidth:800px;dialogHeight:500px;scroll:yes;status:no;help:no;center:1";           var win=window
解决action与iframe显示问题
言如止水
08-13 1589
session失效是login页面会显示在iframe里面而不是整个页面 jie
子Iframe提交action后父Iframe实现跳转
CASER_HDMI的博客
06-28 1443
刚在做一个页面，其中有子Iframe，包含登录跟注册，希望在登录后，父页面进行刷新，网上找了下 location.href 当前页面跳转 parent.location.href 当前页面的父页面跳转 top.location.href 最外层页面跳转 登录提交验证后，回到成功页面，页面里利用jsp输出js语句进行跳转 out.write("window.paren
利用iframe标签解决form的action执行网络接口时获取不到返回数据的问题
Hoey的博客
12-12 553
若要利用input的自动检测功能（例如required="required"、type="email"），则必须利用form的action执行网络接口，且提交方式为type="submit"，但是action执行网络接口无法接受返回值， 导致无法接收如登录注册功能服务端响应的结果。若舍弃input的自动表单验证，手写每个表单的验证很麻烦，因此要解决利用form提交表单数据无法接收返回数据的问题
使用iframe实现提交表单不刷新页面
09-28
在网页开发中，有时我们需要在用户提交表单时保持页面状态不变，避免页面刷新或跳转至新页面。为了实现这一需求，我们可以利用HTML的`<iframe>`元素，这是一种无刷新提交表单的方法。`<iframe>`允许我们将一个网页...
基于HTML实现表单提交后不刷新页面
09-28
在网页开发中，为了提供更好的用户体验，经常需要在用户提交表单后不刷新整个页面，而是仅更新必要的部分。这通常通过使用AJAX（异步JavaScript和XML）或IFRAME技术来实现。以下是两种基于HTML实现表单无刷新提交的...
关于用struts2框架中iframe对应的jsp页面的不到action的值的问题
weixin_30919235的博客
02-28 173
我们做web项目经常会用到frameset、frame以及iframe，这大大方便了我们页面的构建以及模块功能的划分。但是，再使用这些技术的同时也会遇到各种各样的问题，其中一个就是子页面中得不到struts2的action的值。之前自己在做项目的时候也遇到了这个问题。在网上查阅了大量的资料，现将自己的总结与结论与大家一起分享。 frameset、frame...
iframe标签实现form表单提交无页面刷新(不需要js)---解析
热门推荐
八九点笔记
03-14 2万+
先看一段代码（PHP例子） 1、表单代码（form.php）： <?php header("Content-type: text/html; charset=utf8"); ?> 2、action代码(formAction.php)： <?php echo "alert('test....');"; ?> OK，上面的代码非常简单，但实现了表单提交无刷新.
从父页面读取和操作iframe中内容方法
12-02
基本的操作方法： document.frames(&ldquo;frame_id&rdquo;).document.action; 其中，frame_id是该父页面需要进行操作的iframe的id，action是iframe中的相关操作。 从该方法中，可以看出 document.frames(&ldquo;frame_id&rdquo;)是用来从父页面中获取iframe的id的，而后面的document.action同一般的脚本对页面元素操作一样，具体举个例子来说明一下,其中父页面引用iframe部分如下： 代码如下: &lt;div id=&rdquo;region1&Prime; name=&rdquo;region1&Prime;&gt; &lt;iframe onload=&rdquo;iframe_tes
iframe调用action接口加载jsp时，session丢失问题
weixin_51172484的博客
04-23 2359
iframe调用action接口加载jsp时，session丢失问题问题来源分析问题解决问题插入链接与图片如何插入一段漂亮的代码片新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 问题来源 最近开发的ssh框架项目，要进行上线，因为项目中设计了登录权限，需要用到session来存储信息，在进行接口联调的时候才得知运营人员是使用iframe进行接口调用的，联调时发现接口可以直接在浏览器地址栏访问并加载出界面数据，在使用iframe调用时数据加载不出来 分析问题 在后台经过分析
使用Iframe+Post请求的方式嵌入第三方页面
feimohuan91的博客
05-11 1万+
使用Iframe+Post请求的方式嵌入第三方页面
form提交好后刷新页面
最新发布
08-16
在表单提交后刷新页面可以通过多种方式实现，具体取决于表单提交的方式以及开发者的控制需求。以下是几种常见的实现方法： ### 使用表单提交后刷新页面 如果表单使用传统的 `POST` 方法提交，并且希望在提交后刷新当前页面，可以利用服务器端返回的响应来触发页面刷新。例如，在服务器端返回的响应中设置重定向（`302 Found` 或 `303 See Other`），浏览器会自动跳转到新的 URL，从而实现页面刷新。 ```html &lt;form action=&quot;/submit&quot; method=&quot;post&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt; &lt;input type=&quot;submit&quot; value=&quot;提交&quot; /&gt; &lt;/form&gt; ``` 服务器端（以 Node.js + Express 为例）： ```javascript app.post(&#39;/submit&#39;, (req, res) =&gt; { // 处理表单数据 res.redirect(&#39;/&#39;); // 提交后跳转到首页，触发页面刷新 }); ``` 通过这种方式，用户提交表单后会被重定向到指定页面，浏览器加载新页面，从而实现刷新效果 [^3]。 ### 使用 JavaScript 提交表单并手动刷新页面 如果使用 JavaScript 提交表单（如 `fetch` 或 `XMLHttpRequest`），可以在提交成功后手动刷新页面。这种方法适用于异步提交表单数据并希望在完成后刷新页面的场景。 ```html &lt;form id=&quot;myForm&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt; &lt;button type=&quot;submit&quot;&gt;提交&lt;/button&gt; &lt;/form&gt; ``` JavaScript 示例： ```javascript document.getElementById(&#39;myForm&#39;).addEventListener(&#39;submit&#39;, function (e) { e.preventDefault(); // 阻止默认提交行为 const formData = new FormData(this); fetch(&#39;/submit&#39;, { method: &#39;POST&#39;, body: formData }) .then(response =&gt; { if (response.ok) { location.reload(); // 提交成功后刷新页面 } }) .catch(error =&gt; { console.error(&#39;Error:&#39;, error); }); }); ``` 该方法通过 `location.reload()` 强制刷新当前页面，确保用户看到最新的数据或状态 [^2]。 ### 使用 iframe 提交后刷新页面 在使用 `&lt;iframe&gt;` 实现无刷新提交的场景中，也可以通过在 `&lt;iframe&gt;` 加载完成后执行 `window.parent.location.reload()` 来刷新父页面。这种方式适用于需要在不刷新主页面的情况下提交数据，但最终仍需要更新主页面内容的场景。 主页面： ```html &lt;form action=&quot;submit_url&quot; method=&quot;post&quot; target=&quot;hidden_frame&quot;&gt; &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt; &lt;input type=&quot;submit&quot; value=&quot;提交&quot; /&gt; &lt;/form&gt; &lt;iframe name=&quot;hidden_frame&quot; id=&quot;hidden_frame&quot; style=&quot;display:none;&quot;&gt;&lt;/iframe&gt; ``` 提交页面（iframe 加载的页面）： ```html &lt;script&gt; window.parent.location.reload(); // 提交完成后刷新主页面 &lt;/script&gt; ``` 通过在 `&lt;iframe&gt;` 中执行脚本，可以触发主页面的刷新，从而实现页面状态更新 [^1]。 ### 总结 上述方法分别适用于不同的开发场景：服务器端重定向适用于传统表单提交；JavaScript 异步提交后刷新适用于现代前端应用；iframe 提交后刷新则适用于需要兼容旧浏览器或特殊交互需求的场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值