分享

Jquery+Ajax按钮点击显示等待图片

 ThinkTank_引擎 2015-06-02
    <html xmlns="http://www./1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.1.js" >
    </script>
    <script type="text/javascript">
        function loadImg(){
             $.ajax({
                  url:"AjaxJquery_loading.aspx",
                  type:'post',
                  data:'',
                  beforeSend:function(XMLHttpRequest){
                      $("#myShow").css({display:"",top:"50%",left:"50%",position:"absolute"});
                 },
                 success:function(){
                     //$("#myShow").hide();
                   }
               });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="loadImg()" />
    </div>
    <div id="myShow" style="display:none;">
        <img alt="loading" src="Images/1.gif" />
    </div>

    </form>
</body>
</html>

粘贴过去就好用,但注意:
1.js 中 loadImg 方法中的url参数是后台的页面(本页面)。
2.注意div的id, 图像地址和jquery地址。
    <html xmlns="http://www./1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.4.1.js" >
    </script>
    <script type="text/javascript">
        function loadImg(){
             $.ajax({
                  url:"AjaxJquery_loading.aspx",
                  type:'post',
                  data:'',
                  beforeSend:function(XMLHttpRequest){
                      $("#myShow").css({display:"",top:"50%",left:"50%",position:"absolute"});
                 },
                 success:function(){
                     //$("#myShow").hide();
                   }
               });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="loadImg()" />
    </div>
    <div id="myShow" style="display:none;">
        <img alt="loading" src="Images/1.gif" />
    </div>

    </form>
</body>
</html>

粘贴过去就好用,但注意:
1.js 中 loadImg 方法中的url参数是后台的页面(本页面)。
2.注意div的id, 图像地址和jquery地址。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多