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. 基于三台主机部署phpwind

    PHPWind(简称:PW)的使命是让网站更具价值,让更多人从网络中享受便利,以提升生活品质. phpwind是一个基于PHP和MySQL的开源社区程序,是国内最受欢迎的通用型论坛程序之一.phpwi ...

  2. LigerUI LigerGrid getSelectedRows() 多选顺序 不是从上到下修改方法

    1.问题 LigreGrid内部是选中一个,往selected里塞一个, 当执行getSelectedRows() 的时候,会把selected以选中的顺序,返回出来,所以是按照选择顺序返回. 原生代 ...

  3. 花了一年时间开发的弯管机YBC编程软件

    弯管技术广泛应用于锅炉及压力容器,空调制造,汽车,航空航天等多种行业.管型的形状复杂多变弯管工艺人员通常依据图纸输入关键点的坐标(XYZ坐标),然后生成可以由弯管机设备直接直接完成的加工指令YBC数据 ...

  4. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  5. 数据处理之pandas简单介绍

    Offical Website :http://pandas.pydata.org/ 一:两种基本的数据类型结构 Series 和 DataFrame 先来看一下Series import panda ...

  6. 2017-6-4 CTF解题报告

    1.签到题 附件 扫描二维码得到 ZCTF{WELCOME_TO_20-209} 2.阿斯克的秘密 从前有个叫做阿斯克的人,他写了一句话,聪明的你能明白他写的是什么吗? 附件 int a; while ...

  7. 手脱ASPack

    ESP定律到达OEP,重新分析代码块 在菜单栏中找到OllyDump插件,该插件的窗口的弹了出来,有一些选项可供我们修改,我们可以对Base of Code进行修改,这里Base of Code = ...

  8. 【NO.3-1】Jmeter - 在Windows配置HOSTS的方法

    在Windows配置HOSTS 那么还记得Windows如何修改HOSTS文件吗? (1) 进入到C:\Windows\System32\drivers\etc (2) 通过”记事本”来打开hosts ...

  9. 金明的预算方案 NOIP 2006 提高组

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱 ...

  10. 窗体调用 OCX 的使用方法（MFC,WINFORM）

    在上一篇中,我们做了一个OCX控件,叫mfcActive.ocx,在这一篇我们要做的就是使用这个ocx控件.第一步:创建一个MFC的对话框工程(其实winform 也是一样的) 第二步:在工具箱中常规 ...