1.jquery ajax请求方式与提示用户正在处理请稍等

为了提高用户体验度，我们通常会给出 “正在处理，请稍等！”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现

初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同，刚开始使用同步请求，以至后来出现许多问题，特别在体验度方面。
异步和同步：
同步意味着执行完一段程序才能执行下一段，它属于阻塞模式，其表现在网页上的现象是——浏览器会锁定页面（即所谓的页面假死状态），用户不能操作其它的，必须等待当前请求返回数据。而使用异步方式请求，页面不会出现假死现象。
提升用户体验度：
当用户提交数据等待页面返回结果是需要时间的，有时这段等待时间比较长，为了提高用户体验度，我们通常会给出 “正在处理，请稍等！”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现，
eg:
html关键代码

1	`<div` `id="warning"></div>`

js文件中的关键代码

$.ajax(function(){

.

//省略了一些参数，这里只给出async 和 beforeSend

async: false, //同步请求，默认情况下是异步（true）

beforeSend: function(){

$('#warning').text('正在处理，请稍等！');

}

});

注意，如果你按照同步设置 async: false, $('#warning').text('正在处理，请稍等！');在网页中根本没有出现效果，如果将$('#warning').text('正在处理，请稍等！');换成 alert（‘test'）；在发送请求前会立即看到弹出框，这说明 beforeSend:是执行了，但是换成别的诸如 $('#warning').text('正在处理，请稍等！'); 在请求发出返回结果了都没有看到提示出现。关于这个问题，我是纳闷了很久，问题到底是什么我还是不清楚。
把同步请求改成异步请求，上面的问题就没有了，

beforeSend: function(){

$('#warning').text('正在处理，请稍等！');

}

会立即被执行。

2.Ajax等待数据返回时loading的显示

摘要: Ajax等待数据返回时loading的显示

"Ajax等待数据返回时loading的显示"：

有时候ajax处理的数据量比较大的时候，用户等待时间会比较长，如果这个时候不提示用户等待的话，用户可以会觉得很不耐烦。这里介绍一下如何在ajax如何在处理数据时显示loading。

首先在html页面添加一个div层：

<div id="loading" style="color:#ffffff; display:none; position:absolute; top:80px; left:3em;"></div>

这个div一开始是不显示的。

然后你可以在ajax请求函数中添加如下代码：

xmlreq.onreadystatechange = function()
{   var sliderblank = document.getelementbyid("sidebar");// 让需要显示结果的层显示空白sliderblank.innerhtml = " "; // 获得loading显示层var loadingdiv = document.getelementbyid("loading"); // 插入loading图loadingdiv.innerhtml = "<img src='images/loading.gif' />"; // 显示loading层loadingdiv.style.display = ""; if(xmlreq.readystate == 4)  {   // 数据处理完毕之后，将loading层再隐藏掉loadingdiv.style.display = "none"; //alert(xmlreq.responsetext);//document.getelementbyid('content2').innerhtml = xmlreq.responsetext;   // 输出处理结果runxml(xmlreq.responsetext);}
}

就是如此简单！

下面再附另一段参考代码：

xmlhttp.onreadystatechange = function(){//displace loading statusvar loadingdiv = document.getelementbyid("loading"); // get the divloadingdiv.innerhtml = "loading..."; // insert tip informationloadingdiv.style.right = "0"; // set position, the distance to the right border of current document is 0pxloadingdiv.style.top = "0"; // set position, the distance to the top border of current document is 0pxloadingdiv.style.display = ""; // display the div//load completedif(xmlhttp.readystate == 4) {//hide loading statusloadingdiv.style.display = "none"; // after completed, hidden the div againloadingdiv.innerhtml = ""; // empty the tip information//process responseif(xmlhttp.status == 200) {var str = xmlhttp.responsetext;/* do something here ! */}elsealert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);}
}

转载:http://www.nowamagic.net/librarys/veda/detail/564

转载于:https://www.cnblogs.com/limeiky/p/5530849.html

jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示相关推荐

jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号用户帐户发货状态请选择未发送已发送查询 JavaScript请求部分: function showdatalist() { var username = ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
ppst——技术视频 jquery ajax 请求同步异步的执行的设置
ppst 技术视频--技术视频 jquery ajax 请求同步异步的执行的设置:请访问ppst 技术视频分享平台 , www.ppst.cc,上面有最新的技术视频,推荐大家把博客录制成视频吧,可以 ...
ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
ajax datatype为html,Jquery ajax请求中datatype的含义
一切从一个普通的前端ajax请求jspringMVC后端的例子开始, 前端jquery ajax 请求: $.ajax({ url: getAbsoluteUrl('score/findScore') ...
循环发ajax请求,在循环中发送jquery ajax请求
我在我的Web应用程序的Map中实现了"空间选择",它选择Streets的数量.选择后,我会为使用"选择处理程序"选择的所有街道获取唯一的街道标识.在循环中发送 ...
Jquery Ajax 请求示例
目录一.引入jquery文件二.完整ajax例子一.引入jquery文件在使用jquery ajax之前,需要先引入jquery文件.可以使用cdn也可以使用本地jquery文件. 推荐一个C ...
以ajax请求方式进行文件下载操作失败的原因及解决方案
以ajax请求方式进行文件下载操作失败的原因及解决方案参考文章: (1)以ajax请求方式进行文件下载操作失败的原因及解决方案 (2)https://www.cnblogs.com/sjshare/ ...
统一处理jquery ajax请求过程中的异常错误信息的机制
统一处理jquery ajax请求过程中的异常错误信息的机制参考文章: (1)统一处理jquery ajax请求过程中的异常错误信息的机制 (2)https://www.cnblogs.com/wi ...
ajax反序列化出错,将数据从jquery ajax请求传递给wcf服务失败了反序列化？
我使用下面的代码来调用wcf服务.如果我调用不带参数的(测试)方法,但返回一个字符串,它工作正常.如果我一个参数添加到我的方法,我得到一个奇怪的错误:将数据从jquery ajax请求传递给wcf服务 ...

jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

1.jquery ajax请求方式与提示用户正在处理请稍等

2.Ajax等待数据返回时loading的显示

jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示相关推荐

最新文章

热门文章