Ajax的beforeSend用处

原创 2018年04月16日 12:11:29
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。

具体可参考jQuery官方文档:http://api.jquery.com/Ajax_Events/

$.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({
	beforeSend : function(){
		showWaiting();
		$("#loadInfo").empty().append("正在获取文件内容...");  
	},


Ajax异步数据交互

-
  • 1970年01月01日 08:00

Ajax beforeSend和complete 方法

$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: functi...
  • chenjianandiyi
  • chenjianandiyi
  • 2016-08-22 10:31:28
  • 11144

jQuery中Ajax事件beforesend及各参数含义

转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: ...
  • dazhi_100
  • dazhi_100
  • 2014-01-21 22:27:43
  • 9918

Ajax 同步提示 beforeSend的另类解决方法

我们知道ajax的async设置为false时浏览器的渲染(UI)线程和js线程是互斥的,所以beforeSend是不会生效的。 那么我们在后台方法处理时长较多时怎么做一个友好的提示用户耐心等待呢。...
  • a410215373
  • a410215373
  • 2017-04-20 11:32:50
  • 1115

jquery的ajax()之 beforeSend属性详解和XMLHttpRequest详解

方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息)。...
  • qq_30908729
  • qq_30908729
  • 2017-08-21 21:00:46
  • 452

灵活运用ajax的方法beforeSend改善用户体验

我们知道,开源框架jquery的API—— jquery.ajax中有一个方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常...
  • ciray
  • ciray
  • 2010-10-27 10:50:00
  • 15724

jquery.ajax之beforeSend方法(解决进度条, "请稍后"提示等……)

常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。下载demo:aj...
  • w405722907
  • w405722907
  • 2018-03-02 16:13:11
  • 101

$.ajax的beforeSend,success, complete,error例子

jquery ajax官方文档: http://api.jquery.com/jquery.ajax/常用的ajax形式:$.ajax({ url: "http://192.168.2.46:...
  • Cryhelyxx
  • Cryhelyxx
  • 2016-11-16 11:08:27
  • 955

Ajax中的beforeSend

在实际的项目中,用户经常会把已提交的数据再次提交,这时候数据库就会因此出现数据的重复.而jquery中的ajax方法中正好有解决此问题的方法,如下红色的代码,在ajax中的beforeSend方法中,...
  • weixin_38753938
  • weixin_38753938
  • 2018-02-12 18:47:40
  • 18

$.ajaxSetup

语法 $.ajaxSetup(name:value, name:value, ...) 设置全局 AJAX 默认选项。 既然是全局默认选项,所以,该项中设置的参数会影响所有的$.ajax请求如$...
  • houpengfei111
  • houpengfei111
  • 2013-05-22 09:56:36
  • 6511
收藏助手
不良信息举报
您举报文章:Ajax的beforeSend用处
举报原因:
原因补充:

(最多只允许输入30个字)