<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
#loading{
width:80px;
height: 20px;
background:#bbb;
color:#000;
display:none;
}
img{border:0;height:100px;width:100px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
//demo1:
$('#send1').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
}); //demo2:
$("#send2").click(function(){
$.post("get1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText2").html(data); // 把返回的数据添加到页面上
}
);
}) //共用这2个全局的ajax事件 在ajax请求过程中,只要图片还未加载完毕,就会一直显示“加载中……”的提示信息
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
}); })
</script>
</head>
<body>
<br/>
<div id="loading">加载中...</div> <br/>
Demo1:
<br/>
<input type="button" id="send1" value="加载"/>
<div id="resText1" ></div> <br/>
Demo2:
<br/>
<form id="form1">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" ></textarea></p>
<p><input type="button" id="send2" value="提交"/></p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText2" >
</div> </body>
</html>

jquery 显示“加载状态 结束”的更多相关文章

  1. jQuery 显示加载更多(节流) 实现预加载

    (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...

  2. jQuery 显示加载更多

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. js 判断页面加载状态

    //----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function ...

  4. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  5. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  6. jquery预加载显示百分比

    jquery预加载显示百分比 <pre> <img class="bj loadimg" loadimg="/weiqingshu/images/1/b ...

  7. WinDbg常用命令系列---显示加载的模块列表lm

    lm (List Loaded Modules) lm命令显示指定的加载模块.输出包括模块的状态和路径. lmOptions [a Address] [m Pattern | M Pattern] 参 ...

  8. 【清单】值得「等待」的12个指示加载状态的 js 库

    以下优选 GitHub 上高 star 的指示加载状态的 JavaScript 库.另外这里还有10个有意思的 JavaScript 实战小项目供大家学习. 上期入口:一份数据分析学习清单.xls M ...

  9. EF如何操作内存中的数据以及加载相关联表的数据:延迟加载、贪婪加载、显示加载

    之前的EF Code First系列讲了那么多如何配置实体和数据库表的关系,显然配置只是辅助,使用EF操作数据库才是每天开发中都需要用的,这个系列讲讲如何使用EF操作数据库.老版本的EF主要是通过Ob ...

随机推荐

  1. pg psql命令

    linux下使用psql命令操作数据库 下面主要用到了insert into  ,pg_dump  , pg_restore 命令 按步骤走 su postgres                   ...

  2. NetBeans-xdebug的安装

    如果总是提示正在连接,ok,应该是没有装xdebug; 1,下载Php版本对应的xdebug.dll文件,以下是官方提供的网址,可以智能判断环境,给出下载链接和使用指南 http://www.xdeb ...

  3. MySQL与Oracle 差异比较之一数据类型

    数据类型 编号 ORACLE MYSQL 注释 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQL ...

  4. DevExpress控件GridView挂下拉控件无法对上值

    下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExp ...

  5. JS URL编码

    JS URL编码escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在 ...

  6. C++ STL算法系列5---equal() , mismatch()

    equal和mismatch算法的功能是比较容器中的两个区间内的元素.这两个算法各有3个参数first1,last1和first2.如果对 于区间[first1,last1)内所有的first1+i, ...

  7. IRequiresSessionState和IReadOnlySessionState应用上的一些差异

    在调用ashx时,如果需要应用Session,则必须继承接口 IRequiresSessionState,IReadOnlySessionState,但根据字面,可以知道 IRequiresSessi ...

  8. delphi TeeChart保存3种图片文件

    var vForm: Tfrm_ChemaShowMainChild;begin vForm := GetActiveForm; vForm.cht_Edit.SaveToMetafile('C:\1 ...

  9. phpcms V9实现QQ登陆OAuth2.0

    phpcmsV9使用的QQ登陆依然是OAuth1.0,但现在腾讯已经不审核使用OAuth1.0的网站了.这对于使用pc的站长来讲是一个无比巨大的坑.经过对phpcms论坛的一位同学做的插件进行修改,现 ...

  10. Python的16个“坑”

    1. 不要使用可变对象作为函数默认值 代码如下: In [1]: def append_to_list(value, def_list=[]): ...: def_list.append(value) ...