浅析巧用Ajax的beforeSend提高用户体验

jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作。

$.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){
   consloe.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"){
     // ...
   }
},
error: function(){
   console.info("error:"+data.responseText);
}
});

以上这篇浅析巧用Ajax的beforeSend提高用户体验就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析巧用Ajax的beforeSend提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ // handle the beforeSend event }, complete:function(){ // handle the complete event } }); 防止重复数据 在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提

  • JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

    目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区

  • 前端图片懒加载(lazyload)的实现方法(提高用户体验)

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求. 实现 懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处

  • Jquery中巧用Ajax的beforeSend方法

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...... }); 防止重复数据 在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没

  • 改善用户体验的五款jQuery插件分享

    改善用户体验的五款jQuery插件分享

    1.菜单栏 清爽美观的菜单栏既能够向用户提供充分的吸引人的内容,又能让网站得体大方. Cool Animated Menu 演示|下载 2. tab 一个非常cool的tab既能够节省空间又能第一时间吸引用户眼球,这是提高用户体验的重要手段. Feature List 演示|下载 3. 登录/注册 登录/注册机制是巩固老用户和吸引新用户的重要方式,人性化的登录/注册机制才能为网站带来越来越多的用户.登录/注册机制要注意细节,最好把登录和注册放在一起,操作要便捷高效. A Cool Login S

  • 巧用ajax请求服务器加载数据列表时提示loading的方法

    我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

  • AJAX应用之注册用户即时检测

    AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示. 常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册. 以上操作,对于用户体验方面来说是比较"差劲"的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时显示,并在检查和显示的同时不影响当前页面的操作.这也就是"异步获取数据&qu

  • ajax 操作全局监测,用户session失效的解决方法

    ajax 操作全局监测,用户session失效的解决方法 jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = function (opt) { var _success = opt && opt.success || function (a, b) { }; var _opt = $.extend(opt, { success: functio

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

  • 理解Android的手势识别提高APP的用户体验

    对于触摸屏,其原生的消息无非按下.抬起.移动这几种,我们只需要简单重载onTouch或者设置触摸侦听器setOnTouchListener即可进行处理.不过,为了提高我们的APP的用户体验,有时候我们需要识别用户的手势,Android给我们提供的手势识别工具GestureDetector就可以帮上大忙了. 基础 GestureDetector的工作原理是,当我们接收到用户触摸消息时,将这个消息交给GestureDetector去加工,我们通过设置侦听器获得GestureDetector处理后的手

随机推荐