巧用Ajax的beforeSend 提高用户体验

jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作。
具体可参考jQuery官方文档：http://api.jquery.com/Ajax_Events/

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete: function(){// Handle the complete event}// ......
});

防止重复数据

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。

举个例子：

// 提交表单数据到后台处理
$.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);}
});

https://www.cnblogs.com/hnsongbiao/p/8966312.html

转载于:https://www.cnblogs.com/sharing1986687846/p/10298905.html

巧用Ajax的beforeSend 提高用户体验相关推荐

巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
php渲染的时候如何提高用户体验,beforeSend怎么提高用户体验
这次给大家带来beforeSend怎么提高用户体验,beforeSend提高用户体验的注意事项有哪些,下面就是实战案例,一起来看一下. jQuery是经常使用的一个开源js框架,其中的$.ajax请求 ...
【整理】输入导航功能-查询与拼音首字母的结合以提高用户体验
我们在界面设计的时候,不管是Web的还是Winform的程序,为了方便用户对各种数据进行操作,提高用户的操作体验,都是一个永恒不变的话题,需要尽可能地提高.本文抛砖引玉,介绍本人在Web和Winfor ...
四个简单例子教你通过用户行为记录提高用户体验之 “快的用户体验”
写在前面的话也许你的网站并不销售任何东西,但网站上所有内容抵达给用户,天然就存在一个名词"用户体验".说到用户体验,它给人的第一印象总是:抽象,带有强烈的主观意识:难以量化.不好 ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
中山网络推广浅谈网站提高用户体验要做好的5点！
中山网络推广表示,企业做网站优化的很大一部分目的是为了能更好地营销.销售自己的产品,而实现销售的工作就需要有客户,所以网站在优化时做好用户体验也非常重要,那么该怎样才能提高用户体验呢?下面中山网络推广 ...
手机uc怎么放大页面_手机网站怎样做可以提高用户体验度？——竹晨网络
目前,手机已经占据了人们大多数的闲暇时间,互联网的流量开始逐渐向移动端倾斜,重视移动端的用户体验,就可以给客户端增加很多意想不到的功能.但是还是有很多公司和站长不知道手机网站应该怎么建才能符合用户的使 ...
图解浏览器缓存，教你提高用户体验
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏浏览器缓存,是浏览器端保存数据,用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络 ...
网站哪些功能可以提高用户体验度?
点击下方"青年码农"关注回复"源码"可获取软件,源码等资料网站用户体验是指用户在使用网站时所感受到的感觉和情感.它包括用户与网站的互动.使用过程中的舒适 ...
UX最佳实践:提高用户体验影响力的艺术
<UX最佳实践:提高用户体验影响力的艺术> 基本信息原书名:UX Best Practices How to Achieve More Impact with User Experien ...

巧用Ajax的beforeSend 提高用户体验

防止重复数据

模拟Toast效果

巧用Ajax的beforeSend 提高用户体验相关推荐

最新文章

热门文章