专栏首页电光石火Ajax等待返回结果时,弹出一个友好的等待提示

Ajax等待返回结果时,弹出一个友好的等待提示

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

通过调用一个函数展示有好的动画效果

 <script type="text/javascript">  
   
 function test_ajax(){     
    $.ajax(     
    {     
       type:"GET",//通常会用到两种:GET,POST。默认是:GET     
       url:"a.php",//(默认: 当前页地址) 发送请求的地址     
       dataType:"html",//预期服务器返回的数据类型。     
       beforeSend:beforeSend, //发送请求     
       success:callback, //请求成功     
       error:error,//请求出错      
       complete:complete//请求完成     
    });     
 }     
 function error(XMLHttpRequest, textStatus, errorThrown){     
   // 通常情况下textStatus和errorThown只有其中一个有值      
   $("#showResult").append("<div>请求出错啦!</div>");     
 }     
 function beforeSend(XMLHttpRequest){     
   $("#showResult").append("<div><img src='loading.gif' /><div>");     
 }     
 function complete(XMLHttpRequest, textStatus){     
   $("#showResult").remove();     
 }     
 function callback(msg){     
   $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");     
 }     
 </script>  

事件的顺序如下: ajaxStart 全局事件 开始新的Ajax请求,并且此时没有其他ajax请求正在进行。 beforeSend 局部事件 当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。 ajaxSend 全局事件 请求开始前触发的全局事件 success 局部事件 请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。 ajaxSuccess 全局事件 全局的请求成功 error 局部事件 仅当发生错误时触发。你无法同时执行success和error两个回调函数。 ajaxError 全局事件 全局的发生错误时触发 complete 局部事件 不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。 ajaxComplete 全局事件 全局的请求完成时触发 ajaxStop 全局事件 当没有Ajax正在进行中的时候,触发。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Ajax等待返回结果时,弹出一个友好的等待提示

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

    似水的流年
  • 微信公众号链接小程序HTML代码

    似水的流年
  • CentOS挂载硬盘

    第一步:列出所有磁盘  命令:  ll /dev/disk/by-path ? 提示:如果无法确认数据盘设备名称,请使用df命令来确认系统盘的名称,从...

    似水的流年
  • Ajax等待返回结果时,弹出一个友好的等待提示

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

    似水的流年
  • 解决Entity Framework查询匿名对象后的跨域访问的一种方式

    在Entity Framework中,可以使用lambda表达式进行对数据的查询,而且可以将查询结果直接映射为对象或者对象列表,这极大的提高的开发速度,并且使数...

    小白哥哥
  • React Native开发APP中的常用命令,如有遗漏请补充(不断更新...)

    做全栈攻城狮
  • TiDB 2.0 RC1 Release

    2018 年 3 月 9 日,TiDB 发布 2.0 RC1 版。该版本在上一版的基础上,对 MySQL 兼容性、系统稳定性和优化器做了很多改进。

    PingCAP
  • [Python] 使用dict和set

    使用{“key”:value}初始化dict对象,例如:d={“name”:”taoshihan”}

    陶士涵
  • JQuery $.axaj的基本格式

    李家酒馆酒保
  • 《我的PaddlePaddle学习之路》笔记十——自定义图像数据集实现目标检测

    在阅读这一篇文章之前,要先阅读上一篇文章使用VOC数据集的实现目标检测,因为大部分的程序都是使用上一篇文章所使用到的代码和数据集的格式。在这篇文章中介绍如何使用...

    夜雨飘零

扫码关注云+社区

领取腾讯云代金券