form表单点击按钮页面会自动刷新问题解决

遇到问题

我在使用bootstrap写一点前端页面的时候，有一个登录表单，使用form来写的，代码如下：

<form class="form-group" autocomplete="off" href="" action="">
   <h1>Login Form</h1>
   <div>
     <input type="text" class="form-control" placeholder="Username" required="" />
   </div>
   <div>
     <input type="password" class="form-control" placeholder="Password" required="" />
   </div>
   <div>
     <button class="btn btn-primary btn-block"
             id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
   </div>
 </form>

然后自己写了ajax来提交到后端的接口做校验，发现每次点击登录按钮后，整个页面会自动刷新，导致ajax拿不到后端返回的结果，或者返回的结果一下子就被刷新了然后不生效。

问题解决方式

查了一下，主要有两种解决方式：
1.把button标签换成a标签，这样就可以了；
2.是由于form表单中，button的type属性默认是submit，当type的值是submit时，点击button就会自动刷新。手动设置type字段的值就解决了，即type=“button”.