Button标签和Form标签组合造成的刷新问题

前言

最近需要开发一个前端的功能，需要用button提交form内数据到后台。但是无论如何写都会造成点击button导致本页面一直刷，而持续请求ajax，无法正常输出，也无法动态的显示一些控件，耽误了好几个小时记录一下。

发现问题

问题的发现是因为有别的页面使用了同样的代码却没有问题，于是经过多次调整发现如果button标签放在form里，并且button标签的type属性是submit会导致这个问题。因此解决这个问题有两个方案：

1. 把button标签放在form标签外面。
2. 如果一定要在form里面，修改button标签的type属性为button

样例

正确写法：

写法1：
<form id="form1">
    <button type="button" id="btn_sample">Sample</button>
</form>

写法2：
<form id="form1">
</form>
<button type="submit" id="btn_sample">Sample</button>