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. java+反射+多线程+生产者消费者模式+读取xml(SAX)入数据库mysql-【费元星Q9715234】

    java+反射+多线程+生产者消费者模式+读取xml(SAX)入数据库mysql-[费元星Q9715234] 说明如下,不懂的问题直接我[费元星Q9715234] 1.反射的意义在于不将xml tag ...

  2. MAC上安装EndNote破解版的链接文件 以及某些安装好后有可能替换执照文件的方法

    一款非常好用的论文写作软件不多形容,开整: X7 mac版本(非免破解版本)链接: 点击我 X8 mac版本(大客户版本,免破解非常好用) 点击我 X8 windows版本(大客户版本,免破解非常好用 ...

  3. nodeJS之crypto加密

    前面的话 加密模块提供了 HTTP 或 HTTPS 连接过程中封装安全凭证的方法.也提供了 OpenSSL 的哈希,hmac, 加密(cipher), 解密(decipher), 签名(sign) 和 ...

  4. S2-032代码执行

    Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与Struts 1的体系结构差别 ...

  5. 聪明的燕姿[JLOI2014]

    题目描述 阴天傍晚车窗外 未来有一个人在等待 向左向右向前看 爱要拐几个弯才来 我遇见谁会有怎样的对白 我等的人他在多远的未来 我听见风来自地铁和人海 我排着队拿着爱的号码牌 城市中人们总是拿着号码牌 ...

  6. C#和NewSQL更配 —— CockroachDB入门（可能是C#下的全网首发）

    阅读目录 CockroachDB是什么 环境部署 实战 性能测试 结语 一.CockroachDB是什么 CockroachDB(https://www.cockroachlabs.com)是Goog ...

  7. Git版本控制系统之基本使用

    最早是通过接触著名的开源社区Github了解到Git的,但一直没有系统学习过.这次下定决心从头到尾系统的学一学,也将学习过程记录于此,供大家批驳.本篇文章先从以下几个方面简单了解一下Git: Git的 ...

  8. Spring+SpringMVC+MyBatis+easyUI整合

    进阶篇 Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API 优化篇 Spring+SpringMVC+MyBatis+easyUI整合优化 ...

  9. redis单机安装以及简单redis集群搭建

    安装环境: 两台虚拟机都是Centos 7.0 IP分别为:192.168.149.132  192.168.149.133 Redis采用的版本是redis-3.2.4 集群是采用两台虚拟机模拟8个 ...

  10. Python 协程总结

    Python 协程总结 理解 协程,又称为微线程,看上去像是子程序,但是它和子程序又不太一样,它在执行的过程中,可以在中断当前的子程序后去执行别的子程序,再返回来执行之前的子程序,但是它的相关信息还是 ...