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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
WebPack配置vue多页面的技巧
May 15 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
node后端服务保活的实现
Nov 10 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的引用计数机制
2013/06/14 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP分页类集锦
2014/11/18 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
再论Javascript的类继承
2011/03/05 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
二年级语文教学反思
2014/02/02 职场文书
幼儿教育感言
2014/02/05 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
廉政承诺书范文
2015/04/28 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript