ajax用beforeSend自定义请求过程中客户端事件，提高用户体验
2024-03-29 01:29:45
本文为博主原创，未经允许不得转载：
在应用ajax的过程中，当我们再前台提交请求的时候，如果服务端响应事件比较长，就会导致需要等很长时间在前台才能接受到服务端返回的
响应结果，往往会导致用户重复点击按钮，进行重复请求，如何可以避免这种情况发生，ajax提供了一个beforeSend属性，用这个既可以避免这种
情况发生。
用这个属性可以定义客户端向服务端请求过程中的事件，比如在请求过程中禁用请求按钮的属性，或定义请求加载状态等，
实现的代码如下：
function exportData(){
$.ajax({
type: "post",
cache: false,
async: true,
data: {
"name":$("#cameraName").val(),
"createTime":$("#createTime").val(),
"lastTime":$("#lastTime").val()
},
beforeSend: function () {
//此处定义并调用jquery-confirm的加载层事件
obj = jqconfirmTip('正在响应请求,请稍候...','fa fa-spinner fa-spin');
return true;
},
dataType: 'json',
url: "exportDetail?rnd=" + Math.random(),
success: function (a) {
if (a.resultCode == "SUCCESS") {
obj.close(); //关闭加载层
} else {
alert("导出失败");
obj.close();
}
},
error: function (msg) {
alert("请求失败");
obj.close();
}
});
}
//jquery-confirm插件，需要引入jquery-confirm.js （该方法可以直接调用）
function jqconfirmTip(title, icon) {
var obj = $.confirm({
backgroundDismiss : false,
content : false,
icon : icon,
title : title,
// autoClose : 'confirm|10000',
animation : 'scaleY',
closeIcon : false,
columnClass : 'col-md-4 col-md-offset-4',// col-md-6 col-md-offset-3
confirmButton : false,
cancelButton : false,
theme : 'black'
});
return obj;
}
效果如图：
上述例子中的应用根据服务端返回的结果类型，去关闭该加载层。
同时ajax也提供了请求完成后回调函数 (请求成功或失败之后均调用)的属性，该属性为：complete，可在此处定义回调事件，关闭或停止beforeSend处定义的事件
示例如下：
$.ajax({
type: "post",
contentType: "application/json",
url: "/userList",
beforeSend: function () {
$("loading").show();
},
success: function (data) {
if (data == "Success") {
// ...
}
},
complete: function () {
$("loading").hide();
},
error: function (data) {
$("loading").hide();
}
});
。
最新文章
- selenium第一课（selenium+java+testNG+maven）
- To create my first app in iOS with Xcode（在Xcode创建我的第一个iOS app ）
- 每天一个linux命令（12）：head 命令
- 如何使用批处理解决批量telnet命令的输入
- WCF证书创建方法
- Backbone视图渲染React组件
- 如何扩展或者添加硬盘给VMware的Linux操作系统
- and,or
- #多个关联的python程序在linux后台运行
- VUE 安装及项目创建
- 2018-2019-2 网络对抗技术 20165220 Exp2 后门原理与实践
- 微信JSAPI支付回调
- Android Studio Git 分支使用实践
- Ajax的一个实例及代码
- 福州大学软件工程1816 | W班 第8次作业[团队作业,随堂小测——校友录]
- Python之随机梯度下降
- 微软BI 之SSIS 系列 - 理解Data Flow Task 中的同步与异步, 阻塞,半阻塞和全阻塞以及Buffer 缓存概念
- java Object类源代码详解 及native (转自 http://blog.csdn.net/sjw890821sjw/article/details/8058843)
- xmlWriter
- python【数据类型：集合】