阻止form表单提交跳转转防丢

我们在前端开发过程中，会经常把数据提交给后台，其中少不了需要form进行表单提交。但是碰到在form中提交会默认跳转到接口页面。
我们新建一个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/user">
        账号：<input type="text" name="name">
        <input type="submit" value="提交">
    </form>
</body>
</html>

上面是一个最简单的demo,后台接口是自己用node服务器模拟的，会返回

{
    code:'1',
    msg:'提交成功'
}

现在我们测试下：

发现点击提交后会自动跳转到接口地址，这可不是我们想要的结果。解决办法如下，修改上面的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/user" target="stop">
        账号：<input type="text" name="name">
        <input type="submit" value="提交">
    </form>
    <iframe  name="stop" style="display:none;"></iframe>  

</body>
</html>

我们建一个隐藏的iframe，增加name属性，这里用stop为例，然后在form上增加target属性，值和iframe的name值相等。现在再测试下，发现成功阻止。

作者：YINdevelop
链接：https://www.jianshu.com/p/6e1ef82bc616
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

技术交流qq群:143280841