Ajax的beforeSend 和 complete

前端的童鞋们：在项目中都会遇到向后台请求数据：

通常会采用ajax请求，在请求的过程中有时返回的数据过多或者用户网络慢的原因，导致页面一开始会有空白页面，这样给用户带来的体验不好

$.ajax请求中有一个beforeSend、complete方法，

1.提高用户体验

$.ajax({url: url,type: "get",data:dataasync:true,//数据加载之前显示loadingbeforeSend: function() {//do something
    },success: function(res) {//do something
    },//数据加载完成之后loading隐藏complete:function(){//do something
    }
})

2 .防止数据重复

当用户提交表单时，虽然点了提交按钮，但是因为网络慢的原因，会出现暂时没有返回数据，用户会认为没有点击成功，

就会造成数据库中产生多条重复的数据---脏数据，所以我们可以在beforeSend中添加禁用提交按钮的功能，在complete后在恢复之，

例如：

/ 提交表单数据到后台处理
$.ajax({type: "get",data: data,url: url,beforeSend: function () {// 禁用按钮防止重复提交$("button").attr({ disabled: "disabled" });},success: function (data) {if (data.code== 0) {//清空输入框
        }},complete: function () {$("button").removeAttr("disabled");},
});

目前只采用了这两种方式：若有遗落，欢迎补充

转载于:https://www.cnblogs.com/Chestnut-LYN/p/10577394.html

Ajax的beforeSend 和 complete相关推荐

Ajax出现 beforeSend 和 complete 的方法失效问题（已解决）
一.背景在点击按钮使用 Ajax 提交表单的时候,希望在提交到服务器之前锁定提交按钮(避免重复点击给后台数据库带来脏数据的风险),并提示文件正在处理:在完成与服务器交互后,解锁提交按钮.问题来了,写 ...
jQuery $.Ajax 的beforeSend、complete、success、error的执行顺序和参数
Ajax每天都在用,但都是复制来的,从来没有看过Ajax的回调函数到底有哪些参数,今天看了一下,记录下来加强记忆,希望能对大家也有些用处. ajax示例: $.ajax({ type: "P ...
ajax get before,Ajax beforeSend和complete 方法
.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle th ...
巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
jQuery中Ajax事件beforesend及各参数含义
Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Han ...
ajax beforesend xhr对象,jQuery中Ajax事件beforesend及各参数含义(示例代码)
转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$ ...
Ajax的beforeSend用处
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考jQuery官方文档:http://api.jque ...
Ajax的beforeSend
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考jQuery官方文档:http://api.jque ...
jquery.ajax之beforeSend方法使用介绍
常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者"内容加载中..",用来告知用户正在请求数据.这个就可以用beforeSend方法来实现 ...

Ajax的beforeSend 和 complete

Ajax的beforeSend 和 complete相关推荐

最新文章

热门文章