前文
??在用JQ+bootstrap写前端的时候，有时需要实现点击按钮后失效的功能，比如下载按钮，为了避免网络延迟而引起的页面不及时跳转，让用户多次点击按钮，造成的服务器压力和用户体验就都不友好。发现Ajax里的beforeSend来实现这功能简直不要太棒。
beforeSend
【利用beforeSend实现提交加载中、form表单的重复提交等前端功能】??官方网址：http://api.jquery.com/Ajax_Events/
??依据官方网址，基本用法就是两个，访问页面前需要执行什么：内容填写到beforeSend里function；访问结束后需要实现什么，就填写到complete里面。
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});
第一个用法：禁止form表单的重复提交
??比如我的需求：点击下载按钮后执行下载时按钮失效，下载完后按钮再恢复使用。因为下载Excel或者csv必须得是form表单，而用form表单要实现禁止重复提交就如下所示，关于主体部分我这边就没写了，具体的导出按钮就可以如下代码所写。
$("form").submit(function(){
$.ajax({
beforeSend:function () {
$(":submit",this).attr("disabled","disabled");
},
complete: function () {
$(":submit",this).removeAttr("disabled");
}
})
});
??相比于用form表单来实现ajax，正常的ajax实现无疑更简单的多，这边也不过多介绍了。
第二个用法：实现加载中的效果
??有时用按钮失效也并不那么友好，比如长时间的网络io，如果只是失效，那用户只能白白等着了，用户体验很差，此时就可以用gif图片加弹窗(比如加载中…)来提示用户正在网络IO。
$("form").submit(function(){
$.ajax({
beforeSend:function () {
show_alert("正在查询数据并发往审批...
文章图片
总结
??这次就到这了，欢迎评论讨论～
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例