博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头
阅读量:5905 次
发布时间:2019-06-19

本文共 1309 字,大约阅读时间需要 4 分钟。

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

 

转载地址:http://stcpx.baihongyu.com/

你可能感兴趣的文章
What is Serverless?
查看>>
CYQ.Data 轻量数据层之路 应用示例三 Aop切入留言系统--操作日志(二十七)
查看>>
Homebrew 的安装方法(官方的方法老是安装失败) 第三方
查看>>
java 服务程序cpu资源占用高的问题
查看>>
Java程序员到架构师的推荐阅读书籍
查看>>
Centos6下DRBD的安装配置
查看>>
高流量站点NGINX与PHP-fpm配置优化
查看>>
Matplotlib Tutorial
查看>>
php5.6升级到php7.1.10(Linux环境)
查看>>
软件评估--你的软件,更重要的是你
查看>>
SVN 操作
查看>>
像素级质量 快速切页面工具
查看>>
对编码、设计中“极简原则”的想法
查看>>
emacs中使用gdb
查看>>
浅析 Linux 初始化 init 系统,第 1 部分: sysvinit
查看>>
C++的继承与多态
查看>>
OpenCV中矩阵类型的个人理解
查看>>
js byte转KB,MB,GB,TB代码
查看>>
有意思的按位操作
查看>>
(转)导入别人工程出错系列
查看>>