1.jquery方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax加载loading图标</title>
</head>
<body>
<form id="test-form" action="test.php" method="post">
<input type="text" name="username">
</form>
<button id="btn">提交</button>
<div id="loading"></div>
<div id="res"></div>
</body>
<script>
$('#btn').click(function(){
$.ajax({
url:$('#test-form').attr('action'), //发送后台的url
type:'post',
data:$('#test-form').serialize(), //序列化表单内容
dataType:'text', //后台返回的数据类型
timeout:15000, //超时时间
beforeSend:function(XMLHttpRequest){
$("#loading").html("<img src='./images/loading.gif' />"); //在后台返回success之前显示loading图标
},
success:function(data){ //data为后台返回的数据
$("#loading").empty(); //ajax返回成功，清除loading图标
$('#res').html('ajax请求成功！');
}
});
});
</script>
</html>

2.js方式

xmlhttp.onreadystatechange = function(){
var loadingdiv = document.getelementbyid("loading"); 
loadingdiv.innerhtml = "loading..."; 
loadingdiv.style.right = "0"; 
loadingdiv.style.top = "0";
loadingdiv.style.display = "block"; 
//load completed
if(xmlhttp.readystate == 4) {
loadingdiv.style.display = "none"; 
loadingdiv.innerhtml = ""; 
if(xmlhttp.status == 200) {
var str = xmlhttp.responsetext;
/* do something here ! */
}
else
alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);
}
}

ajax请求成功前loading的更多相关文章

  1. ajax请求成功前，加载中loading显示

    /*第一次刷新--非定时器刷新数据*/ var fistInitColumn = true; var getAllColumnDatas = function(){ var params = {}; ...

  2. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  3. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  4. Ajax请求成功但是一直进入error的原因

    1.在1.3版本的jQuery以后,严格要求了json格式,如果返回的值不是json格式,他就会执行error函数. 所以如果想让他走success函数的话,还是在后台把数据格式化成json格式吧. ...

  5. ajax请求成功,但是进入error

    ajax请求成功,这是因为json数据没有严格按json格式返回

  6. ajax请求加全局loading , 个别特殊请求不显示loading

    项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

  7. IE9中ajax请求成功后返回值却是undefined

    ie9中ajax请求一般处理程序成功后返回值始终是undefined,在网上找过很多资料,大致意思都是说前后端编码不一致造成的,但是按照资料上的方案去修改却发现根本不能解决我的问题,试过好多种方案都不 ...

  8. ajax请求成功后新开窗口window.open()被拦截解决方法

    ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢   问题: 前面开发项目时碰到一个问题,ajax 异步请求 ...

  9. ajax请求成功后新窗口window.open()被拦截的解决方法

    ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限 ...

随机推荐

  1. PHP面向对象中 static:: 与 self:: parent:: $this-> 的区别

    很多好几年工作经验的PHP工程师,对PHP面向对象中 static:: .self::.parent::.$this->  的定义和使用都不清晰,特做详细梳理: static:: 可以访问全局作 ...

  2. spring项目中service方法开启线程处理业务的事务问题

    1.前段时间在维护项目的时候碰到一个问题,具体业务就是更新已有角色的资源,数据库已更新,但是权限控制不起效果,还是保留原来的权限. 2.排查发现原有的代码在一个service方法里有进行资源权限表的更 ...

  3. git push解决办法： ! [remote rejected] master -> master (pre-receive hook declined)

    前天准备上传一个project到GitLab上,但是试了很多次都上传不上去,报错如下: ! [remote rejected] master -> master (pre-receive hoo ...

  4. Python处理csv文件

    Python处理csv文件 CSV(Comma-Separated Values)即逗号分隔值,可以用Excel打开查看.由于是纯文本,任何编辑器也都可打开.与Excel文件不同,CSV文件中: 值没 ...

  5. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  6. ue4 C++ 编程 通过三个点的位置算出夹角

    const FVector2D& Pt1 = 第一个点的位置; const FVector2D& Pt2 = 第二个点的位置; float EdgeRadians1 = FMath:: ...

  7. bootstrap模态框远程加载网页的正确处理方式

    bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...

  8. Loadrunner 网页诊断图

    Loadrunner 11汉化后版本不包括网页诊断图,所以要想使用网页诊断图,不要汉化.12.50版本汉化后不受影响. 场景执行完,进行analysis时,才能打开网页诊断图. 网页诊断图中组件下载时 ...

  9. 鄙人对constructor和prototype的总结

    在学习js面向对象过程中,我们总是对constructor和prototype充满疑惑,这两个概念是相当重要的,深入理解这两个概念对理解js的一些核心概念非常的重要.因此,在这里记录下鄙人见解,希望可 ...

  10. Python requests 安装与开发

    Requests 是用Python语言编写HTTP客户端库,跟urllib.urllib2类似,基于 urllib,但比 urllib 更加方便,可以节约我们大量的工作,完全满足 HTTP 测试需求, ...