首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图

不废话,在页面上执行点击事件(<a sceneid="@scene.ID" href="javascript:void(0)" onclick="build(this)">生成</a>)

调用下面方法:

 function build(sender) {
var jqSender = $(sender);
var sceneid = jqSender.attr('sceneid'); $.ajax({
type: 'post',
url: "Follow/UpdateUrl",
data: { sceneid: sceneid },
beforeSend: function () {
jqSender.hide().after('<img id="load" src="/images/load.gif" />');
},
success: function (data) {
//根据id和class获取td标签
$('tbody tr[id=' + sceneid + '] td.wxurl-col').html(data.QRUrl);
$('tbody tr[id=' + sceneid + '] td.localkey-col').html(data.LocalKey);
//隐藏生成按钮,插入图片
var localkey = data.LocalKey;
jqSender.after('<img src="/image/' + localkey + '" />');
},
complete: function () {
$('#load').remove();
}
});
}

ajax

后台页面就不写了,url中配置了传递到后台的路径,最主要的就是

beforeSend: function () { jqSender.hide().after('<img id="load" src="/images/load.gif" />'); },

这要考虑到ajax异步请求的特点,当ajax执行到url的时候,会有一个线程跳转到后台去执行,

浏览器会增加一个线程(不知道这么说标不标准)继续执行后面的程序,到success: function (data)暂停等待 后台成功的返回数据

这样,before里面插入的图片就相当于是一个loading,当数据成功返回后,把before里面的图片移除,写在complete: function ()语句中。

我后台的处理流程大概是这样的:首先一个http GET请求,获取微信公众平台的access_token,然后再用http POST请求,获取换取微信二维码的ticket

然后再用WebClient方法,把请求到的二维码下载到本地存储,然后就是数据库的增删查改,展示二维码到网页上。

这么一大段才让loading有足够的时间展示出来,如果时间比较短,可以网上查查看有没有定义一个时间,让loading能够完整的显示,免得很突兀。

注:此篇随笔只供参考使用,而且也有很多小瑕疵,最主要的不是代码,逻辑才是最重要的。

ajax返回数据之前的loading等待的更多相关文章

  1. AJAX 的 Ajax返回数据之前的loading等待效果(gif效果等)

    首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...

  2. Jquery 等待ajax返回数据loading控件ShowLoading组件

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  3. ajax返回数据解析总结

    ajax即异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 ...

  4. 小笔记(一):ajax传递数组及将ajax返回数据赋值

    当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...

  5. ajax返回数据为undefined

    在使用ajax异步请求后台返回数据后,使用console.log(data.message)打印返回数据,显示为undefined.苦恼了很久,终于在网上找到了答案. 先给大家看下异步代码: /*清零 ...

  6. Ajax返回数据却一直进入error(已经解决)

    做asp.net项目  使用ajax $.ajax({ url: '../Music/Default2.aspx?Types=' + type + '&texts=' + text + '', ...

  7. ajax返回数据时,如何将javascript值(通常为对象或数组)转为json字符串

    ajax获取值时,返回的数据为空时 alert后出现 [ ]; 用if语句判断时不为空,此时如何判断返回的数据是否为空.可将返回的值转化为json字符串. JSON.stringify() 方法用于将 ...

  8. struts通过Ajax返回数据时,例如对象类型,没有执行Ajax的回调函数

    <result type="json"  name="success">                 <param name=" ...

  9. Bootstrap分页插件ajax返回数据,工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

随机推荐

  1. openfiler的介绍与使用

    一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变成一个强大的NAS.SAN存储和IP存储网关,为管理员提供一个强大的管理平台,并能能应付未来的存储需求.依赖如VMwa ...

  2. 3人从小公寓创业,到世界最大引擎公司,Unity创始人谈14年...

    Unity创始人David Helgason出席了5月11 - 13日在上海举办的Unite 2017 Shanghai,并在大会期间接受了游戏陀螺的专访,动情地讲述了这14年来从3人在公寓创业,到成 ...

  3. F - ACboy needs your help again! (模拟)

    ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark th ...

  4. 使用IIS服务器部署网页,需要开启服务里的“ASP.NET 状态服务”

    否则会提示“请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同.如果服务器位于远程计算机上,请检查 HKEY_LOCAL_MACHI ...

  5. mysql主从服务器

    #mysql主从服务器 mysql-bin.003673 | 106 查看错误日志show variables like '%log_error%'; replicate-do-table=testm ...

  6. Flink学习笔记:Operators之Process Function

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  7. SLAM技术在国内的发展现状

    近年来,由于扫地机的出现使得SLAM技术名声大噪,如今,已在机器人.无人机.AVG等领域相继出现它的身影,今天就来跟大家聊一聊国内SLAM的发展现状. SLAM的多领域应用 SLAM应用领域广泛,按其 ...

  8. REST模式中HTTP请求方法(GET,POST,PUT,DELETE)

    一直在测试REST模式的WEB SERVICE接口,客户端的HTTP的请求方式一般分为四种:GET.POST.PUT.DELETE,这四种请求方式有什么不同呢.简单的说,GET就是获取资源,POST就 ...

  9. Python循环流程

    1.for循环 计算1+2+3+……+100的和 count = 0 i = 1 for i in range(101): count+=i print(count) 前n项和公式为:Sn=n*a1+ ...

  10. 【算法笔记】B1023 组个最小数

    1023 组个最小数 (20 分) 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 ...