我们在前端开发过程中，会经常把数据提交给后台，其中少不了需要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:'提交成功'
}
现在我们测试下：
stop.gif
发现点击提交后会自动跳转到接口地址，这可不是我们想要的结果。解决办法如下，修改上面的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值相等。现在再测试下，发现成功阻止。
success.gif
网友评论