巧用Ajax的beforeSend 提高用户体验

转载 2018年04月16日 16:29:04

巧用Ajax的beforeSend 提高用户体验

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({
    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);
    }
});

【AJAX】给你不一样的用户体验

AJAX(异步JavaScript和XML),对它早有耳闻,如今,终于见到了它。     一.何为AJAX?     AJAX即“Asynchronous Javascript And XML”...
  • u013034223
  • u013034223
  • 2015-11-17 11:48:33
  • 1466

Ajax beforeSend和complete 方法

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

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

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

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

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

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

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

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

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

一些提高用户体验的前端技术

前端技术提高用户体验及网页渲染性能。
  • yangyuyu77584
  • yangyuyu77584
  • 2016-04-15 11:25:57
  • 867

$.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
  • 949

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

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

jquery ajax请求方式与提示用户等待处理

初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面。 异步和同步:          同步意味着执行完一段程序...
  • mmrsdym
  • mmrsdym
  • 2014-04-04 09:40:00
  • 2239
收藏助手
不良信息举报
您举报文章:巧用Ajax的beforeSend 提高用户体验
举报原因:
原因补充:

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