表单里的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

       记录,分享,让技术更美好~ღ( ´・ᴗ・` )比心

posted @ 2018-02-03 15:12  sophel  阅读(331)  评论(0编辑  收藏  举报