且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

想展示AJAX加载GIF

更新时间:2023-12-05 10:40:04

使用了

  

ajaxStart()

  

ajaxComplete()

函数来显示和隐藏加载GIF。

  $(#加载)。ajaxStart(函数(){
   $(本).show();
 });

$(#加载)。ajaxComplete(函数(){
   $(本).hide();
 });
 

虽然格或元素的id

  

加载

有加载GIF。

您最后code应该是这样的:

 <脚本类型=文/ JavaScript的字符集=utf-8>
    $(文件)。就绪(函数(){
        $(#dvloader)显示()。
        oTable = $('#示例)。dataTable中({
            bJQueryUI:真实,
            sPaginationType:full_numbers
        });
    });
    (文件)。就绪(函数(){
        $(#btnround)。点击(函数(){
            $阿贾克斯({
                网址:ajax_request.php
                缓存:假的,
                异步:真正的,
                数据:形= ROUND
                成功:函数(HTML){
                    $(。demo_jui)HTML(HTML);
                }
            });
        });
        $(#加载)。ajaxStart(函数(){
          $(本).show();
        });

        $(#加载)。ajaxComplete(函数(){
          $(本).hide();
        });

    });
< / SCRIPT>
 

I'm using DataTables. And my all code is working fine. Now I want to put ajax loading gif. Can anyone help me to put ajax loader gif? here is my code. thanks

         <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
        $("#dvloader").show();
            oTable = $('#example').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"                   
            });
        } );                 
         (document).ready(function() {
            $("#btnround").click(function(){
                $.ajax({
                  url: "ajax_request.php",
                  cache: false,
                  async: true,
                  data: "shape=ROUND",
                  success: function(html){
                    $(".demo_jui").html(html);
                }
                });
            });
    });
           </script>

Use the

ajaxStart()

and

ajaxComplete()

functions to show and hide the loading gif.

$("#loading").ajaxStart(function(){
   $(this).show();
 });

$("#loading").ajaxComplete(function(){
   $(this).hide();
 });

While the div or element with id

loading

has the loading gif.

Your final code should look like this :

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#dvloader").show();
        oTable = $('#example').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    });
    (document).ready(function() {
        $("#btnround").click(function() {
            $.ajax({
                url: "ajax_request.php",
                cache: false,
                async: true,
                data: "shape=ROUND",
                success: function(html) {
                    $(".demo_jui").html(html);
                }
            });
        });
        $("#loading").ajaxStart(function(){
          $(this).show();
        });

        $("#loading").ajaxComplete(function(){
          $(this).hide();
        });        

    });
</script>