<!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. php 格式化数字 位数不足前面加0补足

    本文引用自 http://www.fengfly.com/plus/view-62827-1.html 补0: <?php $var = sprintf("%03d", 12 ...

  2. 剑指offer-第三章高质量的代码（调整数组顺序使得奇数位于偶数的前面）

    题目:输入一个整数数组,实现一个函数中调整该数组中数字的顺序,使得所有的奇数位于数组的前半部,所有偶数位于数组的后半部. 思路:用两个指针p1和p2,分别指向数组的头和尾部,p1只向后移,p2只向前移 ...

  3. Arduino运行时突然[卡死在某一行/立即重启/串口输出乱码/程序执行不正常]的可能原因

    1.这一行是分配内存,而内存不够了(Arduino uno只有2k) 2.内存本身已经只剩一点点了,于是就有莫名其妙的问题 3.没有调用Wire.begin().xx.setup()之类的操作!

  4. linux log4j 使用

    1.首先到Apache官网下载log4j.jar文件http://logging.apache.org/log4j/1.2/download.html 引用到eclipse项目里面 2.在src目录下 ...

  5. android面试题（转）

    1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚 ...

  6. MicroSD卡（TF卡）SPI模式实现方法

    现在我们手机的内存卡多为Micro SD卡,又叫TF卡,所以Micro SD卡比SD卡常见.自己曾经也想写写SD卡的读取程序,但又不想特地再去买个SD卡,这时想起手机内存卡不是和SD卡很像吗?在网上查 ...

  7. [转载]字典树(trie树)、后缀树

    (1)字典树(Trie树) Trie是个简单但实用的数据结构,通常用于实现字典查询.我们做即时响应用户输入的AJAX搜索框时,就是Trie开始.本质上,Trie是一颗存储多个字符串的树.相邻节点间的边 ...

  8. 数往知来 ASP.NET 表单的提交_url传值_重定向 <十八>

    一.表单提交时注意 如果是以get方式提交数据的时候,在接收时是用QueryString方式进行接收 如果是以post请求数据时在接收时是用Form进行接收 为什么么要这样做呢?我们用Request[ ...

  9. 设计模式 外观 Facade

    外观模式的作用是简化接口.它提供一个统一的接口用来访问子系统的一群接口.通过这个高层接口使子系统更容易使用. 同时,通过外观将客户从组件的子系统中解耦. Head 1st中使用了家庭影院的例子来说明外 ...

  10. 如何引用CSS样式表

      如何使用样式 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化.有以下三种方式来插入样式表: 1.外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式 ...