我们在前端开发过程中，会经常把数据提交给后台，其中少不了需要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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。