html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe

表单提交不刷新页面

最新推荐文章于 2023-12-27 23:32:03 发布

原创最新推荐文章于 2023-12-27 23:32:03 发布 · 3.5w 阅读

31 ·

CC 4.0 BY-SA版权

s2: 软件进阶同时被 2 个专栏收录

1053 篇文章

订阅专栏

S1: Web

133 篇文章

订阅专栏

本文介绍了一种在提交HTML表单后不刷新当前页面的方法，通过将目标设置为隐藏的iframe实现。此方法适用于需要在提交表单数据后保持当前页面状态的场景。

在默认情况下，提交form表单后，是有刷新的。但是，有的时候，希望提交表单后不要刷新，免得把页面已经有的东东给刷跑了，那怎么搞呢（最近刚好碰到）？实例代码如下：

<html>
<body>

<form action="" method="post" target="nm_iframe">
	<input type="text" id="id_input_text" name="nm_input_text" />
	<input type="submit" id="id_submit" name="nm_submit" value="提交" />
</form>

<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>

</body>
</html>

经测试，实现了功能。点击提交后，不跳转，不刷新，靠谱。其中， action可以设置为要触发的动作，在本例中，我写成空。