Jquery中巧用Ajax的beforeSend方法


Posted in Javascript onJanuary 20, 2016

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。

$.ajax({
  beforeSend: function(){
   // Handle the beforeSend event
  },
  complete: function(){
   // Handle the complete event
  }
  // ......
});

防止重复数据
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。

举个例子:

// 提交表单数据到后台处理
$.ajax({
  type: "post",
  data: studentInfo,
  contentType: "application/json",
  url: "/Home/Submit",
  beforeSend: function () {
    // 禁用按钮防止重复提交
    $("#submit").attr({ disabled: "disabled" });
  },
  success: function (data) {
    if (data == "Success") {
      //清空输入框
      clearBox();
    }
  },
  complete: function () {
    $("#submit").removeAttr("disabled");
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

模拟Toast效果
ajax请求服务器加载数据列表时提示loading(“加载中,请稍后...”),

$.ajax({
  type: "post",
  contentType: "application/json",
  url: "/Home/GetList",
  beforeSend: function () {
    $("loading").show();
  },
  success: function (data) {
    if (data == "Success") {
      // ...
    }
  },
  complete: function () {
    $("loading").hide();
  },
  error: function (data) {
    console.info("error: " + data.responseText);
  }
});

方法beforeSend,用于在向服务器发送请求前添加一些处理函数,希望通过这篇文章加深大家对beforeSend方法的学习认识。

Javascript 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
javascript定时器完整实例
Feb 10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
React实现评论的添加和删除
Oct 20 Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
详解Javascript模板引擎mustache.js
Jan 20 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php中执行系统命令的方法
2015/03/21 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
教师求职信
2014/06/17 职场文书
工作后的感想
2015/08/07 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python