1.背景
最近因为自己过失,遇到一个坑,问题不大自己折腾了很久。记录一下,代码如下:
<form action='' id='userForm'>
<input type='text' data-name='username' value='tom'/>
<input type='password' data-name='password' value='123456'/>
<button>确定</button><button type='reset'>取消</button>
</form>
类似上面的结构,我写了一个工具方法,需要一个包裹标签,可以一键获取表单数据对象。就无意加了一个form标签,只是为了包裹,没有用到表单提交。
另外,现在开发中,用到的emmet插件。敲标签默认情况下,不会给form加action,button加type。当然,我的潜意识里,以为只有button的type=’submit’才会提交表单。然后悲剧就发生了…
2.异常结果
大概两种现象
1.network显示:ajax status canceled
2.浏览器url后面多了个问号‘?’
3.页面被刷新
3.解决方案
常用的两种方案
1.button设置 type='button';
2.button绑定事件添加 return false;
4.总结
1.当ajax提交请求时,页面如果有其他请求操作会出现canceled状态。
2.form标签不设置action属性,提交后浏览器url会加?
3.button标签不设置type,也会提交表单
切记,勿再入坑!!!