jquery中beforeSend和complete的使用 --- 提高用户体验

jquery的ajax请求步骤：

$.ajax({type:"GET",//通常会用到两种：GET,POST。默认是：GETurl:"a.php",//(默认: 当前页地址) 发送请求的地址dataType:"html",//预期服务器返回的数据类型。beforeSend:beforeSend, //发送请求success:callback, //请求成功error:error,//请求出错 complete:complete//请求完成});}

第一：用于在发送ajax请求之前设置请求头

　即作为前端，如果我们希望在发送数据之前设置请求头，就可以像下面这么做：

beforeSend: function(request) {request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
},

第二：防止数据重复

当用户提交表单时，虽然有时候已经点击了提交按钮，但是由于网络原因，会出现暂时没有返回数据等情况，用户会认为没有点击成功，就会造成数据库中产生多条重复的数据---脏数据，所以我们可以在beforeSend中添加禁用提交按钮的功能，在complete后在恢复之，如下：

$('.btn').click(function(){//2.$.ajax({type:'get',url:'08sleep.php',dataType:'json',beforeSend:beforeSend,success:function(res){console.log(res);},error:function(){console.log("连接错误");},complete:complete})//2.防止数据重复//点击按钮请求数据 数据么有响应成功 用户可能再次点击 多次请求 可以禁止按钮function beforeSend(){//禁用按钮防止重复提交$(".btn").attr('disabled',true);}function complete(){$(".btn").attr('disabled',false);}})

第三：模拟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);}
});

jquery中beforeSend和complete的使用 --- 提高用户体验相关推荐

巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
php渲染的时候如何提高用户体验,beforeSend怎么提高用户体验
这次给大家带来beforeSend怎么提高用户体验,beforeSend提高用户体验的注意事项有哪些,下面就是实战案例,一起来看一下. jQuery是经常使用的一个开源js框架,其中的$.ajax请求 ...
文盘Rust -- 子命令提示，提高用户体验
作者: jiashiwen 原文来源: https://tidb.net/blog/ec09d93b 文盘Rust -- 子命令提示,提高用户体验 notice"Rust is a trad ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
中山网络推广浅谈网站提高用户体验要做好的5点！
中山网络推广表示,企业做网站优化的很大一部分目的是为了能更好地营销.销售自己的产品,而实现销售的工作就需要有客户,所以网站在优化时做好用户体验也非常重要,那么该怎样才能提高用户体验呢?下面中山网络推广 ...
手机uc怎么放大页面_手机网站怎样做可以提高用户体验度？——竹晨网络
目前,手机已经占据了人们大多数的闲暇时间,互联网的流量开始逐渐向移动端倾斜,重视移动端的用户体验,就可以给客户端增加很多意想不到的功能.但是还是有很多公司和站长不知道手机网站应该怎么建才能符合用户的使 ...
图解浏览器缓存，教你提高用户体验
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏浏览器缓存,是浏览器端保存数据,用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络 ...
网站哪些功能可以提高用户体验度?
点击下方"青年码农"关注回复"源码"可获取软件,源码等资料网站用户体验是指用户在使用网站时所感受到的感觉和情感.它包括用户与网站的互动.使用过程中的舒适 ...
UX最佳实践:提高用户体验影响力的艺术
<UX最佳实践:提高用户体验影响力的艺术> 基本信息原书名:UX Best Practices How to Achieve More Impact with User Experien ...

jquery中beforeSend和complete的使用 --- 提高用户体验

jquery的ajax请求步骤：

第一：用于在发送ajax请求之前设置请求头

第二：防止数据重复

第三：模拟toast效果

jquery中beforeSend和complete的使用 --- 提高用户体验相关推荐

最新文章

热门文章

jquery中beforeSend和complete的使用 --- 提高用户体验

jquery的ajax请求步骤：

第一：用于在发送ajax请求之前设置请求头

第二：防止数据重复

第三： 模拟toast效果

jquery中beforeSend和complete的使用 --- 提高用户体验相关推荐

最新文章

热门文章

第三：模拟toast效果