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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
Javascript的闭包详解
Dec 26 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
vant实现购物车功能
Jun 29 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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与已存在的Java应用程序集成
2006/10/09 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python字符串的常用操作方法小结
2016/05/21 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python面向对象实现方法总结
2020/08/12 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
大专生找工作自荐书
2014/06/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
python - timeit 时间模块
2021/04/06 Python