表单里的button默认是submit类型
今天很坑爹,周六一大早加班开始码代码,本来想做数据加密测试,于是乎用tp框架搭建了一个应用环境,二话不说,开始码码。
但,今天一大早就栽坑!直到同事喊吃饭还在坑里出不来!吃完饭继续码,最后码的我想哭o(╥﹏╥)o
我发现,只要是我在加上了<form>标签,我的button绑定的ajax就提交失败,我的button明明没有标记“type=submit”为毛感觉每次ajax提交失败,但页面却莫名奇妙的被刷新!!!
毁三观场面描述如下:
去掉form,点击button,ajax提交成功,顺利执行了ajax回调;
加上form,点击button,ajax阻塞无返回状态,页面自动刷新,但查看后台数据提交成功!
综上,我分析得出结论:
加上form后,进行了表单级提交,刷新了整页面!
而ajax是异步的,所以,后台无法再路由到已被刷新推进history的历史页面,更无法找到回调,所以看到数据被后台保存,而ajax一直是阻塞。
唯一的罪魁祸首就是button了,点击button时肯定触发了form表单的默认提交操作,即使action=""还是会刷新整页面
基于上述分析推论,我给button加上了类型控制,再次保存,运行,一切OK!
<form method="get" action="">
<fieldset>
<legend>新增一条人员信息</legend>
<div class="row">
<label>姓名</label><input type="text" name="f_name" required="required" value="test9"/>
</div>
<div class="row">
<label>工号</label><input type="text" name="f_no" required="required" value="test9"/>
</div>
<div class="row">
<label>微信号</label><input type="text" name="f_wx" required="required" value="test9"/>
</div>
<div>
<button type="button" id="btn_add_staff" >提交</button>
</div>
<!--表单里的button的问题!-->
</fieldset>
事实证明,form表单里的button默认的是submit类型,虽然没有在API里看到,但验证过程证实了这一点,为什么之前一直没有发现呢?
因为之前的我,那个小心谨慎保守的,一直用的input,这次本想用下Button,好靠近h5的脚步,没想到这第一步就踩雷了!o(╥﹏╥)o
记录,分享,让技术更美好~ღ( ´・ᴗ・` )比心
路漫漫其修远兮,吾将上下而求索。
May stars guide your way⭐⭐⭐