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

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

巧用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正在进行中的时候,触发。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Scrapy笔记零 环境搭建与五大组件架构

    环境搭建上参看官方说明文档:http://scrapy-chs.readthedocs.io/zh_CN/1.0/intro/install.html

    十四君
  • 2019年末,来一发基于Hexo自建博客生态指南!

    本文篇幅较长,涉及的面较广,通篇阅读大概需要半个小时左右。建议时间紧迫的大佬们可以先收藏文章,之后闲时再细细阅读,个人预览DEMO,有关文中具体涉及到的工具大...

    云爬虫技术研究笔记
  • Vue 全家桶学习笔记:Vue-router

    在以前,前后端是不分离的,这个阶段通常是由服务端渲染好页面(SSR),再发送页面给前端去展示;接着到了前后端分离的阶段,前端向静态资源服务器拿资源,再通过 js...

    Chor
  • web狗之writeup--do you know upload?

    这是一道上传绕过的题目,其实没有什么特别的地方。这里就是想介绍一下自己使用的一个特别好的工具,就是 weevely。这个工具是 kali 中类似于中国菜刀的工具...

    madneal
  • <img>标签

    <img> 标签向网页中嵌入一幅图像。<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 元素创建的是被引用图像的占位空间。

    Html5知典
  • 44万条数据揭秘:如何成为网易云音乐评论区的网红段子手?

    之前由于懒,总是评论区放个代码就草草了事,技术号们也不太好转载,以后争取《凹凸数读》的每篇文章都在这个《凹凸玩数据》里写下流程。

    朱小五
  • <area>标签

    <area> 标签定义图片映射中的区域(注:图像映射指得是带有可点击区域的图像)。<area>元素总是嵌套在 <map> 元素中。

    Html5知典
  • <video>标签

    Html5知典
  • 【通信】XMLHttpRequest 代码说明

    示例中实例化了一个XMLHttpRequest对象,通过为该对象绑定onload回调函数处理从xxxUrl返回来的数据。

    Html5知典
  • <form>标签

    <form> 标签用于创建用户输入的 HTML 表单。该表单能够含有文本段,单选复选框,按钮等。该表单还可用于向指定的 URL 或服务器传递数据。

    Html5知典

扫码关注云+社区

领取腾讯云代金券