思路：
需要一个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> <button type="reset">重置</button>
</form>
<script>
document.querySelector('button').onclick=()=>{
console.log("已经成功提交"+document.querySelector('input').value);
}
</script>
</body>
</html>
