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. 7. leetcode 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  2. Alluxio 1.5集群搭建

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 二.文件准备 2.1 文件名称 alluxio-1.5.0-hado ...

  3. golang 之验证码api

    知识一:如何返回一个json数据? 先定义一个结构体ResponseData,2个参数,并返回的是json数据,key就是json后定义的名称 type ResponseData struct { S ...

  4. Sublime text 3搭建Python开发环境

    前辈们说的已经很多了,但是自己依旧会出现各种问题,写篇日志记录这次的搭建经验. 1.安装python,我用的是python3.5,可以上官网下载 2.安装Sublime text 3,可以上官网下载 ...

  5. Oracle 11g DG手工switchover切换标准化流程

    Oracle 11g DG手工switchover切换标准化流程 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + Oracle DB 11.2.0.4 Primary RAC(2 ...

  6. 资金平台交易明细扩展开发-DEP

    前言 支持农垦项目中,需要增加抓取银行接口传输数据,需求有两点:一是银企平台前置机需要增加扩展中行.农行数据字段.(代理账号.代理账户名称.代理银行) 二是EAS资金模块中的交易明细查询列表界面能够显 ...

  7. 【python密码学编程】7.暴力破解凯撒加密法

    # _*_ coding:utf-8 _*_ #Caeser Ciper import pyperclip messgae = 'GUVF VF ZL FRPERG ZRFFTNR.' nums = ...

  8. Hotkeys.js 2.0.2 发布,捕获键盘输入和输入的组合键快捷键,它没有依赖

    这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...

  9. 前端到后台ThinkPHP开发整站(7)

    今晚我继续这个项目的前台开发,把前台的做出来了,现在项目进行一个收尾工作了,还有栏目页和一个文章页的开发,做完这两个算是完成了.说到这里感觉有点松懈了,把剩下两个功能页面做完在吹吧,先看看今天弄的代码 ...

  10. 【有意思的BUG】视频连接超时

    最近遇到了一个BUG,但是它的出现又存在概率,所以挺有意思的. BUG的现象是:视频在播放过程中(已播放进度<已加载进度),首先出现了缓冲的动画效果其次呈现雪花背景并且抛出异常"视频连 ...