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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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中extract()函数的妙用分析
2012/07/11 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP数组相关函数汇总
2015/03/24 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python程序控制语句用法实例分析
2020/01/14 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python map及filter函数使用方法解析
2020/08/06 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
追悼会主持词
2014/03/20 职场文书
先进党支部申报材料
2014/12/24 职场文书
司机个人年终总结
2015/03/03 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL