关于button按钮影响了Ajax的回调函数

<button οnclick="return zhuce()">注册</button>
<input type="button" οnclick="return zhuce()" value="注册"/>

这是按钮的两种不同的写法,但是两者之间会有微小的差别。

如在form表单下的button按钮在没有指定type类型的时候,button会有一个默认的type="submit",这回就是掉这个坑里了。

当在form表单中的button上绑定Ajax时,type为submit的button会直接影响Ajax的成功亦或者失败的毁掉函数,导致Ajax的回调函数失效。

button按钮上面加上了ajax的事件,那么他的执行顺序是:  先执行ajax,触发里面的事件,走完以后接着走button的按钮提交表单参数,最后看到的页面效果,是表单提交以后的效果,会把返回值直接写到页面上。

所以最终导致Ajax的回调函数无法执行的罪魁祸首就是form表单下的button按钮会有一个默认的type="submit"

<!--解决办法:将button的type属性设置为button-->
<button type="button" class="layui-btn layui-btn-normal" οnclick="addLabel()" style="display: block; margin: 0 auto">搜索</button>

猜你喜欢

转载自blog.csdn.net/WICHER_WU/article/details/80253987
今日推荐