jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头
2024-08-20 13:36:21
beforeSend方法的用户主要有下面几个：
第一：用于在发送ajax请求之前设置请求头
即作为前端，如果我们希望在发送数据之前设置请求头，就可以像下面这么做：
beforeSend: function(request) {
request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
},
第二：防止数据重复
当用户提交表单时，虽然有时候已经点击了提交按钮，但是由于网络原因，会出现暂时没有返回数据等情况，用户会认为没有点击成功，就会造成数据库中产生多条重复的数据---脏数据，所以我们可以在beforeSend中添加禁用提交按钮的功能，在complete后在恢复之，如下：
// 提交表单数据到后台处理
$.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);
}
});
最新文章
- project.pbxproj 的merge问题
- jquery easyui tree的全选与反选
- js中java式的类成员
- Rust的几个预测
- Filestream 使用简单步骤
- linux 下搭建svn
- 删除Visual Studio Online 中团队项目
- C# MD5加密解密帮助类
- Web 在线文件管理器学习笔记与总结（3）创建文件
- Firefox-常用扩展
- Access to the path '' is denied.解决方案
- openerp学习笔记 错误、警告、提示、确认信息显示
- 【Unity3D自学记录】利用代码改动图片属性(Inspector)
- jQuery Ajax用法
- keil5之32环境配置
- OCR技术浅析-自写篇（2）
- The 19th Zhejiang University Programming Contest Sponsored by TuSimple (Mirror) B"Even Number Theory"（找规律？？？）
- C# 模拟 HTTP POST请求
- TCP、UDP和HTTP区别
- FTP 错误1