如何让form 表单提交数据后，页面不跳转不刷新？（已解决）

原创于 2020-05-24 20:13:07 发布 · 3.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端 #html5

前端_Javascript 同时被 2 个专栏收录

20 篇文章

订阅专栏

前端_HTML5

5 篇文章

订阅专栏

本文介绍了一种防止表单提交后页面跳转或刷新的方法，即利用iframe作为数据提交的目标。通过创建隐藏的iframe，将form的target属性设置为iframe的name，点击提交按钮时，数据会提交到iframe内，保持页面状态不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：
需要一个iframe标签做替罪羊，form点击提交后数据提交到iframe里面，当什么都没发生一样，先把写好的iframe标签隐藏起来，给form绑定属性target为和iframe的name一模一样的值，当点击button进行提交后，就会提交到iframe框里面，这样就不会重新打开一个新页面且成功提交数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe{
            display: none;
        }
    </style>
</head>

<body>
    <iframe src="" frameborder="0" name="iframeName"></iframe>
    <form action=" " target="iframeName">
        用户名: <input type="text" placeholder="请输入用户名">
        <button>提交</button>&nbsp;<button type="reset">重置</button>
    </form>
    <script>
        document.querySelector('button').onclick=()=>{
            console.log("已经成功提交"+document.querySelector('input').value);
        }
    </script>
</body>
</html>

在这里插入图片描述