首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ajax等待返回结果时,弹出一个友好的等待提示

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

作者头像
似水的流年
发布2019-12-13 17:31:28
3.8K0
发布2019-12-13 17:31:28
举报
文章被收录于专栏:电光石火电光石火

巧用Ajax的beforeSend 提高用户体验

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

具体可参考jquery官方文档:http://api.jquery.com/Ajax_Events/

[html] view plain copy

print?

  1. $.ajax({  
  2.     beforeSend: function(){  
  3.      // Handle the beforeSend event  
  4.     },  
  5.     complete: function(){  
  6.      // Handle the complete event  
  7.     }  
  8.     // ......  
  9. });  

防止重复数据

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

举个例子:

[html] view plain copy

print?

  1. // 提交表单数据到后台处理  
  2. $.ajax({  
  3.     type: "post",  
  4.     data: studentInfo,  
  5.     contentType: "application/json",  
  6.     url: "/Home/Submit",  
  7.     beforeSend: function () {  
  8.         // 禁用按钮防止重复提交  
  9.         $("#submit").attr({ disabled: "disabled" });  
  10.     },  
  11.     success: function (data) {  
  12.         if (data == "Success") {  
  13.             //清空输入框  
  14.             clearBox();  
  15.         }  
  16.     },  
  17.     complete: function () {  
  18.         $("#submit").removeAttr("disabled");  
  19.     },  
  20.     error: function (data) {  
  21.         console.info("error: " + data.responseText);  
  22.     }  
  23. });  

模拟Toast效果

ajax请求服务器加载数据列表时提示loading(“加载中,请稍后...”),

[html] view plain copy

print?

  1. $.ajax({  
  2.     type: "post",  
  3.     contentType: "application/json",  
  4.     url: "/Home/GetList",  
  5.     beforeSend: function () {  
  6.         $("loading").show();  
  7.     },  
  8.     success: function (data) {  
  9.         if (data == "Success") {  
  10.             // ...  
  11.         }  
  12.     },  
  13.     complete: function () {  
  14.         $("loading").hide();  
  15.     },  
  16.     error: function (data) {  
  17.         console.info("error: " + data.responseText);  
  18.     }  
  19. });  

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

[html] view plain copy

print?

  1. <script type="text/javascript">
  2. function test_ajax(){    
  3.    $.ajax(    
  4.    {    
  5.       type:"GET",//通常会用到两种:GET,POST。默认是:GET    
  6.       url:"a.php",//(默认: 当前页地址) 发送请求的地址    
  7.       dataType:"html",//预期服务器返回的数据类型。    
  8.       beforeSend:beforeSend, //发送请求    
  9.       success:callback, //请求成功    
  10.       error:error,//请求出错     
  11.       complete:complete//请求完成    
  12.    });    
  13. }    
  14. function error(XMLHttpRequest, textStatus, errorThrown){    
  15.   // 通常情况下textStatus和errorThown只有其中一个有值     
  16.   $("#showResult").append("<div>请求出错啦!</div>");    
  17. }    
  18. function beforeSend(XMLHttpRequest){    
  19.   $("#showResult").append("<div><img src='loading.gif' /><div>");    
  20. }    
  21. function complete(XMLHttpRequest, textStatus){    
  22.   $("#showResult").remove();    
  23. }    
  24. function callback(msg){    
  25.   $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");    
  26. }    
  27. </script>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-07-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 巧用Ajax的beforeSend 提高用户体验
    • 防止重复数据
      • 模拟Toast效果
        • 通过调用一个函数展示有好的动画效果
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档