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. 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

    1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...

  2. python-桶排序

    桶排序 通排序非常浪费空间, 比如需要排序的范围在0~2000之间, 需要排序的数是[3,9,4,2000], 同样需要2001个空间 注意: 通排序不能排序小数 以下为从小到大代码实现 #!/usr ...

  3. EntityFramework Core查询问题集锦（一）

    前言 和大家脱离了一段时间,有时候总想着时间挤挤总是会有的,但是并非人愿,后面会借助周末的时间来打理博客,如有问题可以在周末私信我或者加我QQ皆可,欢迎和大家一起探讨,本节我们来讨论EF Core中的 ...

  4. mysql-python 安装

    [root@localhost ~]# [root@localhost ~]# [root@localhost ~]# gcc -v    查看是否安装gcc 若报错则未安装 [root@localh ...

  5. Node.js Up and Runing 学习日记(一)

    认识一个Node.js程序 HTTP模块是专为快速非阻塞式HTTP服务器而用C重新编写的. 1. var http = require('http'); 2. http.createServer(fu ...

  6. 三菱Q系列PLC基本指令讲解

    1.数据传送指令MOV和MOVP,格式为 MOV    SRC1    DES1     表示条件接通,将SRC1的值传送到DES1寄存器中,带P的表示只在条件接通的上升沿指令执行一个扫描周期,不带P ...

  7. java类的继承，多态，抽象类与接口

    知识点梳理:     1,怎样定义自己的类. MyStarFrame,MyStarPanel 类中定义: (1)属性(数据),变量. (2)方法(函数),行为. (3)构造方法(特征,作用,何时被调用 ...

  8. Linux下SVN配置

    1.安装svnyum install subversion 2.创建版本库fengyu(版本库的名字取来和你web项目的名字相同,否则你在服务器检出后会变成web项目里还有一层版本库的目录,里面才是项 ...

  9. SQL基本之增删查改操作

    1.为表添加主键 alter table <tablename> add primary key(col); 主键添加前: 主键添加后: 2.插入数据 insert into <ta ...

  10. SQL 四种连接查询（内连接、左连接、右连接、全连接）

    下面列出了您可以使用的 JOIN 类型,以及它们之间的差异. (1)     JOIN: 如果表中有至少一个匹配,则返回行(inner join) (2)     LEFT JOIN: 即使右表中没有 ...