前言
最近需要开发一个前端的功能,需要用button提交form内数据到后台。但是无论如何写都会造成点击button导致本页面一直刷,而持续请求ajax,无法正常输出,也无法动态的显示一些控件,耽误了好几个小时记录一下。
发现问题
问题的发现是因为有别的页面使用了同样的代码却没有问题,于是经过多次调整发现如果button标签放在form里,并且button标签的type属性是submit会导致这个问题。因此解决这个问题有两个方案:
- 把button标签放在form标签外面。
- 如果一定要在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>