Form表单提交且不刷新页面的简单实现

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

#form #刷新 #表单 #前端 #iframe

本文介绍了一种防止表单提交后刷新整个页面的方法，通过将表单目标设置为隐藏的iframe，实现在提交表单时不刷新当前页面，保持网页功能和效果不变。

form表单在点击提交后会刷新整个页面，有时会影响网页功能和效果
使之不刷新的解决思路：给form表单指定一个隐藏的iframe，这样提交表单后刷新的就是那个iframe而不是整个页面了

iframe：

<iframe name="hidden" style="display:none;"></iframe>

form：

<form name="form" method="post" target="hidden">
    表单内容
</form>
基于HTML实现表单提交后不刷新页面
09-28
使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考
jquery.form.js (异步提交，页面无刷新提交FORM)
03-23
jquery.form.js (异步提交，页面无刷新提交FORM), 1.需要引用jquery 2.引用JS后， $("form").ajaxSubmit(function (responseResult) { //responseResult 为从后台返回信息});
js实现表单提交后不重新刷新当前页面
10-21
本文介绍了如何通过js实现表单提交后不重新刷新当前页面的方法实例.既提交了FORM保存了数据,页面也不会跳转，很实用。需要的朋友可以参考下
form表单提交不刷新页面
菜鸟小灰灰的博客
03-30 1万+
form表单提交时，往往会刷新页面，数据提交到后台会跳转到其他页面 如果不需要刷新页面时，可以通过ifame实现无刷新。 在form表单下定义一个ifame , 将form的target属性指向frameFile，这样就实现了不刷新页面的form提交。
form 表单提交不刷新页面
weixin_40317130的博客
03-19 320
<!-- 引入 jquery.min.js--> <!-- 引入 jquery.form.min.js--> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.min.js"></script> <form name="bearings" id="bear.
vue form 表单提交后刷新页面的方法
10-18
接下来，我们将详细介绍在Vue中表单提交后刷新页面的方法。 首先，需要理解的是，Vue的响应式系统如何帮助我们在数据变更后更新视图。在Vue实例中，所有的数据都是响应式的，一旦数据变更，视图会自动进行更新。...
layui form表单提交后实现自动刷新
10-16
现在让我们来总结一下在layui中实现表单提交而不刷新页面并正确获取数据的步骤： 1. 为表单提交按钮设置type类型，通常为"button"，并添加相应的事件监听函数。 2. 在事件监听函数中，使用event.preventDefault()...
Form提交表单页面刷新不跳转
12-13
1、设计源码 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ />...Form提交表单页面不跳转</title> </head> <b
如何阻止 form 表单提交后刷新页面？
qq_40147756的博客
12-27 1310
如何阻止 form 表单提交后刷新页面？
form表单提交不刷新页面的方法
weixin_30535913的博客
04-16 1909
方法1：给form表单加onsubmit事件，值为return false; <form action="" method="post" onsubmit="return false"> 　<button type="submit" class="btn btn-primary">提交</button> </form> 方法2：在FORM表...
form表单 ajax提交不刷新页面
weixin_53677404的博客
04-01 981
要实现使用form表单传递数据，然后使得返回来的数据加载，而不需要重载（刷新）整个页面，这里是通过ajax技术，不用action，否则页面会刷新，使得数据无法传递过去，这里使用onsubmit函数。 ...
怎么实现form表单提交后不重新刷新当前页面
weixin_33970449的博客
06-20 748
怎么实现表单提交后不重新刷新当前页面     如何实现表单提交后不重新刷新当前页面 &lt;form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'&gt; 　　&lt;input type="button" id="btnSubmit" name="btnSubmit" valu...
关于提交form不刷新的问题
weixin_30608503的博客
07-02 303
最近在做一个项目，除去主页面是html页面，点击菜单按钮都由ajax加载生成，在这种情景下，F5刷新或者提交form表单就会将页面回复到刚刚打开主页面。 现在有一个这样的场景，点击子菜单生成一个子页面，在子页面有一个添加按钮，如图： 在点击添加按钮后会出现一个模态框，将信息录入，如图： 如果直接使用form表单提交那么就会将整个页面刷新，与预想的结果不符，于是在网上找到了设置form...
form表单提交后不刷新页面
weixin_30566111的博客
06-13 885
https://blog.youkuaiyun.com/yuuuuchang/article/details/78982590?tdsourcetag=s_pcqq_aiomsg 看了上面链接的，我只有以下方法才适用。。 我们在绑定onsubmit的时候是把returnfalse放进onsubmit后面的调用函数内的, 这样子如果你的函数出现了错误,将不会继续执行到函数最后'returnfa...
点击按钮提交表单后如何不刷新页面
HEConfidence的博客
03-11 5689
<form id = "form1"> <input type = "text" value = "" placeholder = "请输入姓名"/> <input type = "submit"> </form> 我们给点击submit的时候，页面就被刷新，表单填写内容消失，并且，页面的可视区域也变了，那么如何让点击submit的时候，不会出现这种情况呢？ 我们在</form>标签后面加上一个<ifra...
阻止form表单提交的时候页面刷新
走在bug的路上
09-14 9441
把&lt;button&gt;&lt;/button&gt;标签改为&lt;input type="button"&gt;或者在&lt;button&gt;中添加属性 type="button" 问题虽小，但还是有必要记录一下 改之前，每次点击都会刷新页面，错误信息也不提示 &lt;button type="submit" class="layui-btn l
html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe
热门推荐
认知 行动 坚持
02-28 3万+
在默认情况下， 提交form表单后， 是有刷新的。 但是， 有的时候， 希望提交表单后不要刷新， 免得把页面已经有的东东给刷跑了， 那怎么搞呢（最近刚好碰到）？ 实例代码如下：         经测试， 实现了功能。 点击提交后， 不跳转， 不刷新， 靠谱。
怎么实现表单提交后不重新刷新当前页面
melody_day的博客
12-07 2万+
如何实现表单提交后不重新刷新当前页面 　　 　　 当我点击保存提交FORM表单后,如何让当前页面维持不变(即不刷新当前页)？ 在FORM表单后添加一个iframe，即<form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post' target="rfFrame">
如何让form 表单提交数据后，页面不跳转不刷新？（已解决）
数据库爆破专家的博客
05-24 3252
思路： 先把写好的iframe标签隐藏起来，给form绑定属性target为和iframe一模一样的值，当点击button进行提交后，就会提交到iframe框里面，这样就不会重新打开一个新页面且成功提交数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, .
form表单提交不跳转页面并刷新
05-15
要实现form表单提交不跳转页面并刷新，可以使用Ajax技术。具体步骤如下： 1. 给form表单添加一个id属性，方便在JavaScript中使用。 2. 使用JavaScript获取form表单元素和提交按钮元素。 3. 给提交按钮元素添加一...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值