iframe标签实现form表单提交(如文件上传下载）不刷新

最新推荐文章于 2025-05-16 15:27:41 发布

原创最新推荐文章于 2025-05-16 15:27:41 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用隐藏iframe实现表单提交时页面无刷新的技术，并进一步探讨了如何通过JavaScript实现在无刷新基础上的局部刷新，提高用户体验。

一，实现不刷新

先看一段代码（PHP例子）

1、表单代码（form.php）：

[php] view plain copy print ?

<?php
header("Content-type: text/html; charset=utf8");
?>
<iframe name="testIframeName" style="display:none;"></iframe>
<form target="testIframeName" method="post" action="formAction.php">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="submit" value=" 提交 " />
</form>

<?php
header("Content-type: text/html; charset=utf8");
?>
<iframe name="testIframeName" style="display:none;"></iframe>
<form target="testIframeName" method="post" action="formAction.php">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="submit" value=" 提 交 " />
</form>

2、action代码(formAction.php)：

[php] view plain copy print ?

<?php
echo "<script>alert('test....');</script>";
?>

<?php
echo "<script>alert('test....');</script>";
?>

OK，上面的代码非常简单，但实现了表单提交无刷新....哪这是为什么呢？

哦~其实很基础的东西......就是form标签的属性问题.....如图：

OK，解释就到这里了，虽然例子很简单，很基础....但大多数人不太清楚怎么回事......如果你知道，哈哈，不要喷我....

二，实现局部刷新

ServletActionContext.getResponse().getWriter().print("<script>parent.getref2()</script>");

一的基础上后台调用前台页面的方法getref2()